如何給localStorage設置一個過期時間？
- 2019 年 12 月 30 日
- 筆記
摘要： 有意思的實現方式。
- 原文：如何給localStorage設置一個過期時間？
- 作者：蘇南 – 首席填坑官
- 公眾號：IT平頭哥聯盟
Fundebug經授權轉載，版權歸原作者所有。
引言
這個話題其實在上次分享<小程式填坑記里講過了>已經講過（大佬可繞過哦～），但後來群里/評論都有些同學，提到了一些疑問，問能否單獨整理一篇更為詳細的分享，講解一下細節和完善提到的不足，如是有了下文?。 —— 「 用心分享 做有溫度的攻城獅，我是首席填坑官——蘇南 」
各位大佬早安，這裡是@IT·平頭哥聯盟，我是首席填坑官∙蘇南，用心分享 做有溫度的攻城獅。 公眾號：
honeyBadger8，群：912594095
思考點
從我們接觸前端起，第一個熟悉的存儲相關的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·平頭哥聯盟-首席填坑官∙蘇南 分享,交流：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以及本文地址： https://blog.fundebug.com/2018/11/26/set-expire-time-for-localstorage/
您的用戶遇到BUG了嗎？
.copyright *{box-sizing:border-box}
