自定義辦法設置 localStorage 過時時間

introduction

在 web 開發中，咱們知道 cookie、session、localStorage 均可以保存用戶的數據，cookie的 domain、path 限制了 cookie 的跨域， 有數量和大小的限制，能夠設置有效時間。 session是後臺在瀏覽器注入一個設置了 httponly 的不可讀取的 cookie ， session data由後臺保存在數據庫或者內存中，在web中，session 是靠 cookie 做爲惟一標示來實現的，也能夠設置過時時間。 localStorage 是 H5 的數據存儲辦法， 也是有大小限制的，可是不能夠設置過時時間。 本文主要說的是如何自定義辦法讓 localStorage 實現過時時間。

---

module.exports = {
    // 過時時間，默認30天
    age: 30 * 24 * 60 * 60 * 1000,
    /**
     * 設置過時時間
     * @param age
     * @returns {exports}
     */
    setAge: function (age) {
        this.age = age;
        return this;
    },
    /**
     * 設置 localStorage
     * @param key
     * @param value
     */
    set: function (key, content) {
        localStorage.removeItem(key);
        let _time = new Date().getTime();
        let _age = this.age;
        let value = {};
        value._value = content;
        
        // 加入時間
        value._time = _time;
        // 過時時間
        value._age = _time + _age;
        localStorage.setItem(key, JSON.stringify(value));
        return this;
    },
    /**
     * 判斷一個 localStorage 是否過時
     * @param key
     * @returns {boolean}
     */
    isExpire: function (key) {
        
        var isExpire = true,
            value = localStorage.getItem(key),
            now = new Date().getTime();
        
        if (value) {
            value = JSON.parse(value);
            // 當前時間是否大於過時時間
            isExpire = now > value._age;
        } else {
            // 沒有值也是過時
        }
        return isExpire;
    },
    /**
     * 獲取某個 localStorage 值
     * @param key
     * @returns {*}
     */
    get: function (key) {
        let isExpire = this.isExpire(key);
        let value = null;
        if (isExpire) return value;
        value = localStorage.getItem(key);
        value = JSON.parse(value);
        return value._value;
    }
};

usage

var localstorage = require('./localstorage.js');
localstorage.setAge(24*60*60*1000).set('a': 'abc').set('b',{a:1,b:2})

在ios設備上沒法重複setItem()

另外，在iPhone/iPad上有時設置setItem()時會出現詭異的QUOTA_EXCEEDED_ERR錯誤，這時通常在setItem以前，先removeItem()就ok了。