localStorage設定過期時間

wenmin1987 發表於 2020-10-09
localStorage

眾所周知,前端三大快取,cookie,sessionStorage,localStorage,cookie空間太小,一旦大了,會消耗流量,只適合存一些登入會話資訊,而sessionStorage的過期時間就是關閉瀏覽器,是個臨時會話視窗,但是,最近這個差點把我坑了,就是sessionStorage只能在同一標籤下共享,加入你把網址複製貼上到新開啟的標籤頁裡面,你會驚喜的發現,what?居然不共享,這不坑爹呢嗎?咳咳。。還有就是localStorage了,這個好處就是儲存空間大,長時間儲存,同一瀏覽器,標籤頁全部共享,它是直接存到電腦硬碟上的,不好的是,它是永久有效的,除非手動改清除,否則它會在你電腦裡待上一輩子,供他吃好的喝好的,也就是無法設定失效時間,但是我還真不服了,憑什麼我用你就得養你一輩子,哼哼,於是我就自己簡單封裝一下,讓它可以設定失效時間,下面我們用ES6的類來封裝

class Storage{
        constructor(name){
            this.name = 'storage';
        }
        //設定快取
        setItem(params){
            let obj = {
                name:'',
                value:'',
                expires:"",
                startTime:new Date().getTime()//記錄何時將值存入快取,毫秒級
            }
            let options = {};
            //將obj和傳進來的params合併
            Object.assign(options,obj,params);
            if(options.expires){
            //如果options.expires設定了的話
            //以options.name為key,options為值放進去
                localStorage.setItem(options.name,JSON.stringify(options));
            }else{
            //如果options.expires沒有設定,就判斷一下value的型別
                   let type = Object.prototype.toString.call(options.value);
                   //如果value是物件或者陣列物件的型別,就先用JSON.stringify轉一下,再存進去
                if(Object.prototype.toString.call(options.value) == '[object Object]'){
                    options.value = JSON.stringify(options.value);
                }
                if(Object.prototype.toString.call(options.value) == '[object Array]'){
                    options.value = JSON.stringify(options.value);
                }
                localStorage.setItem(options.name,options.value);
            }
        }
        //拿到快取
        getItem(name){
            let item = localStorage.getItem(name);
            //先將拿到的試著進行json轉為物件的形式
            try{
                item = JSON.parse(item);
            }catch(error){
            //如果不行就不是json的字串,就直接返回
                item = item;
            }
            //如果有startTime的值,說明設定了失效時間
            if(item.startTime){
                let date = new Date().getTime();
                //何時將值取出減去剛存入的時間,與item.expires比較,如果大於就是過期了,如果小於或等於就還沒過期
                if(date - item.startTime > item.expires){
                //快取過期,清除快取,返回false
                    localStorage.removeItem(name);
                    return false;
                }else{
                //快取未過期,返回值
                    return item.value;
                }
            }else{
            //如果沒有設定失效時間,直接返回值
                return item;
            }
        }
        //移出快取
        removeItem(name){
            localStorage.removeItem(name);
        }
        //移出全部快取
        clear(){
            localStorage.clear();
        }
    }

以上就是全部程式碼了,diamagnetic說明我全部寫在註釋裡了,我封裝的這個還有個好處就是,你存進去是什麼型別的值,取出來還是什麼型別的值,比如你存進去是個物件,取出來還是個物件,用不著轉型別了,大家都知道快取只支援字串型別的資料,但是我這裡面已經幫你做好了封裝,你只管存和取就可以了,下面我們來試試效果

設定失效時間

let storage = new Storage();
storage.setItem({
        name:"name",
           value:"前端Owen"
    })
let value = storage.getItem('name');
console.log('我是value',value);

 

下面我們檢驗存進去的型別和取出來的型別

普通字串以上已經試過了,現在試試物件

storage.setItem({
         name:"name",
         value:{
                name:"前端Owen",
                skills:"聰明,帥氣"
         },
   })

取出:
let value = storage.getItem('name');
console.log('我是value',value);
下面再試試陣列物件:

storage.setItem({
            name:"name",
            value:[
                {
                    name:"前端林三哥",
                    skills:"聰明,帥氣"
                },
                {
                    name:"前端林小二",
                    skills:"聰明,帥氣,窮"
                }
            ],
        })
 

相關文章