localStorage設定過期時間

2022-06-08 07:15:11 字數 2089 閱讀 8387

劃重點:

sessionstorage不能跨tab頁

設定過期時間在原有的原生api基礎上封裝,存在key的過期資料

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

class storage 

//設定快取

setitem(params) ;

let options ={};

//將obj和傳進來的params合併

object.assign(options, obj, params);

if(options.expires)

else

if (object.prototype.tostring.call(options.value) == '[object array]')

localstorage.setitem(options.name, options.value);

}}

//拿到快取

getitem(name)

catch

(error)

//如果有starttime的值,說明設定了失效時間

if(item.starttime)

else

} else

} //移出快取

removeitem(name)

//移出全部快取

clear()

}

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

設定失效時間

let storage = new

storage();

storage.setitem();

下面我把值取出來

let value = storage.getitem('name');

console.log('我是value',value);

下面我們設定時間短一點,5秒,然後再取出來

在我寫的這個功夫應該已經過期了,我們取出來

let value = storage.getitem('name');

console.log('我是value',value);

false就說明過期了,快取也給刪掉了

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

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

storage.setitem(,

});

重點來了,我們直接取

let value = storage.getitem('name');

console.log('我是value',value);

直接就取出來了

。。。。。。。。。。。。。。。。。

下面再試試陣列物件

storage.setitem(,,],

});

我們直接取出來

let value = storage.getitem('name');

console.log('我是value',value);

localStorage時效設定

css box contentk contentk div contentk input contentk input webkit input placeholder aging aging div nth child 2 label btn,btn1 html class box class c...

獲取和設定localStorage

東鈿金融服務平台 使用者第一次訪問頁面出現,引導步驟,起初一直使用cookie,但是cookie一直不穩定 簡單介紹和使用了localstorage 在我的頁面上就只是用了 獲取localstorage,和設定localstorage。思路和邏輯 和cookie是一樣的,如下 var a local...

如何設定LocalStorage過期時間

前端快取cookie localstorage sessionstorage 根據業務場景不同來選擇使用 老生常談的對比來說 cookie 儲存量小。sessionstorage 儲存週期僅僅到瀏覽器關閉,儲存量是夠了,用起來也真是夠了,無法多個tab頁共享。侷限性也很大。localstorage ...