如何讓 localStorage 具有時效性

在開發中我們常常會運用到 localStorage 來對客戶端瀏覽器的數據進行讀，寫，刪各方面的操作相較於 cookie, 它適合拿來儲存「不需要與 Server 溝通、較複雜且不敏感的資料」，但是 localStorage 唯一美中不足的地方就是無法設置過期時間。localStorage 中的資料會一直保留，直到使用者手動刪除為止。

過多的 localStorage 會引發效能問題，本篇文章將介紹如何讓 localStorage 具有時效性，避免影響網站的運行。

從這篇文章你會知道：

介紹 Web Storage
使用 Javascript 設定 LocalStorage 的過期時間（TTL）

Web Storage

Web Storage 是 HTML5 提供在客戶端瀏覽器儲存資料的技術，並且有 5MB 的儲存空間。

Web Storage 分為 local Storage 與 Session Storage，兩者的差異在於生命週期的不同：

sessionStorage 具有時效性，它會在使用者關閉瀏覽器後即自動清空
localStorage 的生命週期則永久存在，除非手動刪除

使用 Javascript 設定 LocalStorage 的過期時間 (TTL)

為了達到目的，整體概念為我們必須在 setItem() 時將當下 timestamp 加上自定的過期時間，連同資料記錄至 LocalStorage，而在 getItem() 時比對當前的時間是否已超過數據中所儲存的 timestamp，假如超過則 removeItem()。以 Javascript 執行如下：

function setWithExpiry (key, value, ttl) {

	const now = new Date();

	const item = {
		value: value,
		expiry: now.getTime() + ttl,  // 注意 ttl 的單位為豪秒
	};

	localStorage.setItem(key, JSON.stringify(item));
}

function getWithExpiry (key) {

	const itemStr = localStorage.getItem(key);

	if (!itemStr) {
		return null;
	}

	const item = JSON.parse(itemStr);
	const now = new Date();

	// 比較當前的時間是否已超過我們所設定的過期時間
	if  (now.getTime() > item.expiry) {
		localStorage.removeItem(key);
		return null;
	}

	return item.value;
}

參考資料來源：
https://www.sohamkamani.com/javascript/localstorage-with-ttl-expiry/

以上就是歐斯瑞本次『實踐 LocalStorage 擁有時效性的功能』 分享，接下來還會持續介紹各種簡易又好用的方法給大家喔！

記得訂閱歐斯瑞的電子報、追蹤臉書粉絲團及IG，收到更多相關實用資訊！也歡迎與我們聯繫。

前端開發

如何讓 localStorage 具有時效性