思考點
在 web 開發中，我們知道 cookie、session、localStorage都可以保存用戶的數據，cookie的 domain、path 限制了 cookie 的跨域， 有數量和大小的限制，可以設置有效時間。 session是后臺在瀏覽器注入一個設置了 httponly 的不可讀取的 cookie ， session data由后臺保存在數據庫或者內存中，在web中，session 是靠 cookie 作為唯一標示來實現的，也可以設置過期時間。 localStorage 是 H5 的數據存儲辦法， 也是有大小限制的，但是不可以設置過期時間。
從我們接觸前端起，第一個熟悉的存儲相關的Cookie或者來分析我們生活中密切相關的淘寶、物流、鬧鐘等事物來說起吧，
以上種種，我們能得出一個結論任何一件事、一個行為動作，都有一個時間、一個節點，甚至我們可以黑localStorage，就是一個完善的API，為什么不能給一個設置過期的機制，因為sessionStorage、Cookie并不能滿足我們實際的需求。
實現思路
抱歉，黑localStorage不完善，有點夸張了，綜合上述的總結，問題就簡單了，給localStorage一個過期時間，一切就都so easy ？到底是不是，來看看具體的實現吧：
簡單回顧
//示例一：
localStorage.setItem('test',1234567);
let test = localStorage.getItem('test');
console.log(typeof test, test);
//示例二：
localStorage['name'] = '蘇南';
console.log(localStorage['name']);
/*
輸出:
"1234567" ,'蘇南',
這里要注意，1234567 存進去時是number 取出來就成string了
*/
重寫 set(存入) 方法：
具體來看一下代碼 ：
set(key, value, expired) {
/*
* set 存儲方法
* @ param {String} key 鍵
* @ param {String} value 值，
* @ param {String} expired 過期時間，以分鐘為單位，非必須
* @ 由@IT·平頭哥聯盟-首席填坑官∙蘇南 分享
*/
let source = this.source;
source[key] = JSON.stringify(value);
if (expired){
source[`${key}__expires__`] = Date.now() + 1000*60*expired
};
return value;
}
重寫 get(獲取) 方法：
具體來看一下代碼 ：
get(key) {
/*
* get 獲取方法
* @ param {String} key 鍵
* @ param {String} expired 存儲時為非必須字段，所以有可能取不到，默認為 Date.now+1
* @ 由@IT·平頭哥聯盟-首席填坑官∙蘇南 分享
*/
const source = this.source,
expired = source[`${key}__expires__`]||Date.now+1;
const now = Date.now();
if ( now >= expired ) {
this.remove(key);
return;
}
const value = source[key] ? JSON.parse(source[key]) : source[key];
return value;
}
重寫 remove(刪除) 方法：
刪除操作就簡單了，；
remove(key) {
const data = this.source,
value = data[key];
delete data[key];
delete data[`${key}__expires__`];
return value;
}
優化點：
class storage {
constructor(props) {
this.props = props || {}
this.source = this.props.source || window.localStorage
this.initRun();
}
initRun(){
/*
* set 存儲方法
* @ param {String} key 鍵
* @ param {String} value 值，存儲的值可能是數組/對象，不能直接存儲，需要轉換 JSON.stringify
* @ param {String} expired 過期時間，以分鐘為單位
* @ 由@IT·平頭哥聯盟-首席填坑官∙蘇南 分享
*/
const reg = new RegExp("__expires__");
let data = this.source;
let list = Object.keys(data);
if(list.length > 0){
list.map((key,v)=>{
if( !reg.test(key )){
let now = Date.now();
let expires = data[`${key}__expires__`]||Date.now+1;
if (now >= expires ) {
this.remove(key);
};
};
return key;
});
};
}
}
總結：
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
