衆所周知,前端三大緩存,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:"前端林三哥"
})
下面我把值取出來
let value = storage.getItem('name');
console.log('我是value',value);
下面我們設置時間短一點,5秒,然後再取出來
在我寫的這個功夫應該已經過期了,我們取出來
let value = storage.getItem('name');
console.log('我是value',value);
false就說明過期了,緩存也給刪掉了
下面我們檢驗存進去的類型和取出來的類型
普通字符串以上已經試過了,現在試試對象
storage.setItem({
name:"name",
value:{
name:"前端林三哥",
skills:"聰明,帥氣"
},
})
重點來了,我們直接取
let value = storage.getItem('name');
console.log('我是value',value);
直接就取出來了
。。。。。。。。。。。。。。。。。
下面再試試數組對象
storage.setItem({
name:"name",
value:[
{
name:"前端林三哥",
skills:"聰明,帥氣"
},
{
name:"前端林小二",
skills:"聰明,帥氣,窮"
}
],
})
我們直接取出來
let value = storage.getItem('name');
console.log('我是value',value);
是不是很神奇,哈哈,快來試試吧!