前端緩存Cookie、LocalStorage、SessionStorage 根據業務場景不同來選擇使用
老生常談的對比來說:
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);
}
}