一文教你如何實現localStorage的過期機制
前言
我們都知道cookie存儲的數據是可以添加過期時間屬性(Expires/Max-Age),實現過期的。 那麼,LocalStrorage、sessionStrorage可以設置過期嗎??
帶著這樣的疑問,我們一層層剝開其神秘的面紗。
cookie過期機制
我們知道Expires和Max-age都可以設置cookie的過期時間,那麼兩者存在什麼樣的異同點呢?
expires和max-age的區別
Expires 設置的是絕對值,即直接設置當前cookie在什麼時候過期。 就像下面圖中的這樣, GMT格式。
- Expires在HTTP/1.0中已經定義
- max-age在HTTP/1.1中才有定義,為瞭向下兼容,僅使用max-age不夠;
Expires 設置一個絕對值,至少會帶來兩個方面的問題:
- 客戶端和服務端時間不同步的問題。往往表現為時區不同、客戶端時間可被用戶自由修改。
- 很容易在配置後忘記具體的過期時間,導致過期來臨出現浪湧現象(我的理解應該是同時大批量更新的問題)。
Max-Age代表存活時間,記錄的是一個相對時間(例如 6000s),起始時間點是服務器記錄的requet-time。
我們看到除瞭上面提到的兩個值,還有 session, 這個值代表的意思就是在當前連接下,關閉瀏覽器窗口、斷開與服務連接,該數據即失效。
localStorage 數據過期
localstorage本身是沒有過期機制的,不過我們可以通過其他手段來擴展,使其能夠滿足我們的數據過期的需求。
需求分析:
- 存入數據時,順帶傳入過去時間;
- 獲取數據時,判斷當前是否過期,過期返回 undefined; 否則正常返回數據。
動手實踐
localStorage 和 sessionStorage 都繼承自 Storage 對象, 所以我們可以擴展Storage原型方法。
setStorageWithAge(key, value, age)
方法, 接收三個參數,第三個參數代表最大過期時間,我們這裡參考 cookie的 Max-Age 的實現,用相對時間來做。
getStorageWithAge(key)
,內部直接判斷時間是否過期來返回對應的值。
代碼實現:
Storage.prototype.setStorageWithAge = (key, value, age) => { if (isNaN(age) || age < 1) throw new Error("age must be a number"); const obj = { data: value, //存儲值 time: Date.now(), //存值時間戳 maxAge: age, //過期時間 }; localStorage.setItem(key, JSON.stringify(obj)); }; Storage.prototype.getStorageWithAge = key => { const { data, time, maxAge } = JSON.parse(localStorage.getItem(key)); if (time + maxAge < Date.now()) { localStorage.removeItem(key); return undefined; } return data; };
嘗試調用:
localStorage.setStorageWithAge('amingxiansen', '測試過期時間', 30000); localStorage.getStorageWithAge('amingxiansen');
設定30s的過期時間,過期之前和過期之後獲取到的結果。
參考文章
- localStorage設置有效期、過期時間
總結
Storage隻是瀏覽器的一種存儲方案,除此之外還有IndexDB、WebSQL等。
這種實現數據過期機制的思路比較通用,可以擴展到其他需要設置數據過期的場景下。
到此這篇關於如何實現localStorage過期機制的文章就介紹到這瞭,更多相關localStorage的過期機制內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- localStorage設置有效期和過期時間的簡單方法
- JS 中Json字符串+Cookie+localstorage
- Vue的緩存方法示例詳解
- vue中LocalStorage與SessionStorage的區別與用法
- localStorage過期時間設置的幾種方法