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

zhou_you 發布于2019-08-21 14:16 / 2285人閱讀

摘要：是后臺在瀏覽器注入一個設置了的不可讀取的，由后臺保存在數據庫或者內存中，在中，是靠作為唯一標示來實現的，也可以設置過期時間。是的數據存儲辦法，也是有大小限制的，但是不可以設置過期時間。本文主要說的是如何自定義辦法讓實現過期時間。

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了。

GPU云服務器云服務器阿里云服務器自定義鏡像會過期嗎自定義鏡像創建時間設置上傳過期時間 session過期時間設置

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87844.html

瀏覽器緩存

摘要：是服務器響應消息頭字段，在響應請求時告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器緩存取數據，而無需再次請求。注意點啟用緩存之后，瀏覽器的緩存行為與用戶的操作方式有關系，驗證緩存特性開啟的時候不要被假象蒙蔽。以前總是傻傻的分不清緩存和cookie，誤認為cookie就是指瀏覽器緩存。還有 cookie localStorage sessionStorage 緩存四者的關系也沒有搞明白...

Doyle 2019-08-20 14:21 評論0 收藏0
瀏覽器緩存

摘要：是服務器響應消息頭字段，在響應請求時告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器緩存取數據，而無需再次請求。注意點啟用緩存之后，瀏覽器的緩存行為與用戶的操作方式有關系，驗證緩存特性開啟的時候不要被假象蒙蔽。以前總是傻傻的分不清緩存和cookie，誤認為cookie就是指瀏覽器緩存。還有 cookie localStorage sessionStorage 緩存四者的關系也沒有搞明白...

ashe 2019-08-06 13:21 評論0 收藏0
關于網頁本地存儲的一些思考

摘要：于是一個擁有版本控制和過期控制的本地內容存儲功能模塊就算初步完成了。最后基于這個事情的考慮，于是順便寫了個本地存儲控制的庫，基本都在上面了前言關于localStorage sessionStorage之類的api怎么用已經無需我再贅述了，但是具體怎么落實到一個稍微復雜一些的業務中還是需要做一些前期的準備遇見的一些問題 1.localStorage 與 sessionStorage...

陳江龍 2019-08-22 15:26 評論0 收藏0
關于網頁本地存儲的一些思考

摘要：于是一個擁有版本控制和過期控制的本地內容存儲功能模塊就算初步完成了。最后基于這個事情的考慮，于是順便寫了個本地存儲控制的庫，基本都在上面了前言關于localStorage sessionStorage之類的api怎么用已經無需我再贅述了，但是具體怎么落實到一個稍微復雜一些的業務中還是需要做一些前期的準備遇見的一些問題 1.localStorage 與 sessionStorage...

henry14 2019-08-01 18:42 評論0 收藏0