如何給localStorage設定一個過期時間？

蘇南發表於2018-11-06

引言

​  這個話題其實在上次分享<小程式填坑記裡講過了>已經講過（大佬可繞過哦～），但後來群裡/評論都有些同學，提到了一些疑問，問能否單獨整理一篇更為詳細的分享，講解一下細節和完善提到的不足，如是有了下文?。

這裡是@IT·平頭哥聯盟，我是首席填坑官—蘇南,用心分享 做有溫度的攻城獅。
公Z號：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·平頭哥聯盟-首席填坑官∙蘇南 分享
	*/
	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;
			});
		};
	}
}

複製程式碼

總結：

  以上就是今天為大家總結的分享，您GET到了嗎？小程式、sessionStorage、localStorage，都適用，做些許調整即可哦，希望今天的分享能給您帶來些許成長，如果覺得不錯，記得點個贊哦，順便關注下方公Z號就更棒了，每週為您推最新分享??。

寶劍鋒從磨礪出，梅花香自苦寒來，做有溫度的攻城獅!，公眾號：honeyBadger8，梅斌的專欄,首席填坑官∙蘇南的專欄
用心分享，做有溫度的攻城獅!

作者：蘇南 - 首席填坑官
連結：blog.csdn.net/weixin_4325…
交流群：912594095、公眾好：honeyBadger8
本文原創，著作權歸作者所有。商業轉載請聯絡@IT·平頭哥聯盟獲得授權，非商業轉載請註明原連結及出處。

相關文章