如何給localStorage設定一個過期時間？
摘要：有意思的實現方式。
Fundebug經授權轉載，版權歸原作者所有。
引言
這個話題其實在上次分享 <小程式填坑記裡講過了> 已經講過（ 大佬可繞過哦～ ），但後來群裡/評論都有些同學，提到了一些疑問，問能否單獨整理一篇更為詳細的分享，講解一下細節和完善提到的不足，如是有了下文。 —— 「 用心分享 做有溫度的攻城獅 ，我是 首席填坑官 —— 蘇南 」
各位大佬早安，這裡是 @IT·平頭哥聯盟 ，我是 首席填坑官∙蘇南 ，用心分享 做有溫度的攻城獅。
公眾號： honeyBadger8 ，群：912594095
思考點
從我們接觸前端起，第一個熟悉的儲存相關的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(存入) 方法：
- 首先有三個引數 key、value、expired ，分別對應 鍵、值、過期時間，
- 過期時間的單位可以自由發揮，小時、分鐘、天都可以，
- 注意 點：儲存的值可能是陣列/物件，不能直接儲存，需要轉換
JSON.stringify， - 這個時間如何設定呢？在這個值存入的時候在鍵(key)的基礎上擴充套件一個欄位，如：key+’ expires ‘，而它的值為當前 時間戳 + expired過期時間
- 具體來看一下程式碼 ：
set(key, value, expired) {
/*
* set 儲存方法
* @ param {String}key 鍵
* @ param {String}value 值，
* @ param {String}expired 過期時間，以分鐘為單位，非必須
* @ 由@IT·平頭哥聯盟-首席填坑官∙蘇南 分享,交流：912594095
*/
let source = this.source;
source[key] = JSON.stringify(value);
if (expired){
source[`${key}__expires__`] = Date.now() + 1000*60*expired
};
return value;
}
重寫 get(獲取) 方法：
- 獲取資料時，先判斷之前儲存的時間有效期，與當前的時間進行對比；
- 但儲存時
expired為非必須引數，所以預設為當前時間+1，即長期有效； - 如果儲存時有設定過期時間，且在獲取的時候發現已經小於當前時間戳，則執行刪除操作，並返回空值；
- 注意 點：儲存的值可能是陣列/物件，取出後不能直接返回，需要轉換
JSON.parse， - 具體來看一下程式碼 ：
get(key) {
/*
* get 獲取方法
* @ param {String}key 鍵
* @ param {String}expired 儲存時為非必須欄位，所以有可能取不到，預設為 Date.now+1
* @ 由@IT·平頭哥聯盟-首席填坑官∙蘇南 分享,交流：912594095
*/
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;
}
優化點：
- 記得上次有個
同學，是這麼 評論 的：「 刪除快取能放到constructor裡面執行麼，放到get裡面 不取就一直在那是不是不太好？」； - 所以本次優化做一個初始化刪除操作，清除已經過期的資料;
- 為什麼不用
for in而是 for ?for in迴圈遍歷物件的屬性時，原型鏈上的所有屬性都將被訪問，解決方案：使用hasOwnProperty方法過濾或Object.keys會返回自身可列舉屬性組成的陣列；
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·平頭哥聯盟-首席填坑官∙蘇南 分享,交流：912594095
*/
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;
});
};
}
}
總結
以上就是今天為大家總結的分享，您GET到了嗎？小程式、sessionStorage、localStorage，都適用，做些許調整即可哦，希望今天的分享能給您帶來些許成長，如果覺得不錯，記得關注下方 公眾號 哦，每週第一時間為您推最新分享。
更多文章
- easy-mock 最好的備胎沒有之一
- immutability因React官方出鏡之使用總結分享！
- 面試踩過的坑，都在這裡了～
- 你應該做的前端效能優化之總結大全！
- 如何給localStorage設定一個過期時間？
- 動畫一點點 - 如何用CSS3畫出懂你的3D魔方？
作者：蘇南 - 首席填坑官
連結： https://blog.csdn.net/weixin_…
交流：912594095 ，公眾號：
honeyBadger8
本文原創，著作權歸作者所有。商業轉載請聯絡 @IT·平頭哥聯盟 獲得授權，非商業轉載請註明原連結及出處。
關於Fundebug
Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了8億+錯誤事件，得到了Google、360、金山軟體、百姓網等眾多知名使用者的認可。歡迎免費試用！
