點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

給localStorage設置一個過期時間的方法分享

來源：懂視網責編：小采時間：2020-11-27 22:05:27

給localStorage設置一個過期時間的方法分享

給localStorage設置一個過期時間的方法分享:思考點在 web 開發中，我們知道 cookie、session、localStorage都可以保存用戶的數據，cookie的 domain、path 限制了 cookie 的跨域，有數量和大小的限制，可以設置有效時間。 session是后臺在瀏覽器注入一個設置了 httponly 的不可讀取的 c

推薦度：

點擊下載本文 文檔為doc格式

導讀給localStorage設置一個過期時間的方法分享:思考點在 web 開發中，我們知道 cookie、session、localStorage都可以保存用戶的數據，cookie的 domain、path 限制了 cookie 的跨域，有數量和大小的限制，可以設置有效時間。 session是后臺在瀏覽器注入一個設置了 httponly 的不可讀取的 c

思考點

在 web 開發中，我們知道 cookie、session、localStorage都可以保存用戶的數據，cookie的 domain、path 限制了 cookie 的跨域，有數量和大小的限制，可以設置有效時間。 session是后臺在瀏覽器注入一個設置了 httponly 的不可讀取的 cookie ， session data由后臺保存在數據庫或者內存中，在web中，session 是靠 cookie 作為唯一標示來實現的，也可以設置過期時間。 localStorage 是 H5 的數據存儲辦法，也是有大小限制的，但是不可以設置過期時間。

從我們接觸前端起，第一個熟悉的存儲相關的Cookie或者來分析我們生活中密切相關的淘寶、物流、鬧鐘等事物來說起吧，

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·平頭哥聯盟-首席填坑官∙蘇南 分享
 */
 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·平頭哥聯盟-首席填坑官∙蘇南 分享
 */
 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·平頭哥聯盟-首席填坑官∙蘇南 分享
 */
 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;
 });
 };
 }
}

總結：

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

給localStorage設置一個過期時間的方法分享

推薦度：

點擊下載本文 文檔為doc格式

標簽：方法設置過過期時間

熱門焦點

給localStorage設置一個過期時間的方法分享

給localStorage設置一個過期時間的方法分享

給localStorage設置一個過期時間的方法分享

最新推薦

猜你喜歡

熱門推薦