如何設置LocalStorage過期時間


前端緩存CookieLocalStorageSessionStorage 根據業務場景不同來選擇使用
老生常談的對比來說:
Cookie: 存儲量小。
SessionStorage:存儲周期僅僅到瀏覽器關閉,存儲量是夠了,用起來也真是夠了,無法多個Tab頁共享。局限性也很大。
LocalStorage::存儲量和存儲周期都夠用了,但是有些業務場景就是不想永久保存就很尷尬。
要么找現成的類庫處理,要么手寫一個,分享一個之前工作中的一次封裝,直接上代碼

 class Store {
        constructor(key) {
            this.key = 'store';
        }
        
        // 存儲
        setItem(params) {
            let initObj = {
                key: '',  // 存儲的key
                value: '',  // 存儲的值
                validity: null,  // 過期時間 單位:毫秒
                start: new Date().getTime() // 記錄什么時候存儲的
            }
            let options = {};
            // 合並、並處理參數
            Object.assign(options, initObj, params);
            localStorage.setItem(options.key, JSON.stringify(options));
        }

        // 取值
        getItem(key) {
            let options = localStorage.getItem(key);
            // 設置了過期時間
            if ( options.validity && options.validity > 0 ) {
                const date = new Date().getTime();
                // 判斷是否超時
                if ( date - options.start > options.validity ) {
                   //  緩存過期,清除緩存,返回false
                    localStorage.removeItem(key);
                    return false;
                } else {
                  // 存儲還沒到時間
                    return options.value;
                }
            } else {
              // 如果沒有設置失效時間,直接返回值
                return options.value;
            }
        }

        // 對外暴露移出緩存方法
        removeItem(key){
            localStorage.removeItem(key);
        }
  }


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM