劃重點:
sessionstorage不能跨tab頁
設定過期時間在原有的原生api基礎上封裝,存在key的過期資料
眾所周知,前端三大快取,cookie,sessionstorage,localstorage,cookie空間太小,一旦大了,會消耗流量,只適合存一些登入會話資訊,而sessionstorage的過期時間就是關閉瀏覽器,是個臨時會話視窗,但是,最近這個差點把我坑了,就是sessionstorage只能在同一標籤下共享,加入你把**複製貼上到新開啟的標籤頁裡面,你會驚喜的發現,what?居然不共享,這不坑爹呢嗎?咳咳。。還有就是localstorage了,這個好處就是儲存空間大,長時間儲存,同一瀏覽器,標籤頁全部共享,它是直接存到電腦硬碟上的,不好的是,它是永久有效的,除非手動改清除,否則它會在你電腦裡待上一輩子,供他吃好的喝好的,也就是無法設定失效時間,但是我還真不服了,憑什麼我用你就得養你一輩子,哼哼,於是我就自己簡單封裝一下,讓它可以設定失效時間,下面我們用es6的類來封裝
class storage以上就是全部**了,diamagnetic說明我全部寫在注釋裡了,我封裝的這個還有個好處就是,你存進去是什麼型別的值,取出來還是什麼型別的值,比如你存進去是個物件,取出來還是個物件,用不著轉型別了,大家都知道快取只支援字串型別的資料,但是我這裡面已經幫你做好了封裝,你只管存和取就可以了,下面我們來試試效果//設定快取
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()
}
設定失效時間
let storage = new下面我把值取出來storage();
storage.setitem();
let value = storage.getitem('name');下面我們設定時間短一點,5秒,然後再取出來console.log('我是value',value);
在我寫的這個功夫應該已經過期了,我們取出來
let value = storage.getitem('name');false就說明過期了,快取也給刪掉了console.log('我是value',value);
下面我們檢驗存進去的型別和取出來的型別
普通字串以上已經試過了,現在試試物件
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 ...