前言

我們都知道cookie存儲的數(shù)據(jù)是可以添加過期時間屬性（Expires/Max-Age），實現(xiàn)過期的。 那么，LocalStrorage、sessionStrorage可以設置過期嗎？？

帶著這樣的疑問，我們一層層剝開其神秘的面紗。

cookie過期機制

我們知道Expires和Max-age都可以設置cookie的過期時間，那么兩者存在什么樣的異同點呢？

expires和max-age的區(qū)別

Expires 設置的是絕對值，即直接設置當前cookie在什么時候過期。 就像下面圖中的這樣, GMT格式。

• Expires在HTTP/1.0中已經定義
• max-age在HTTP/1.1中才有定義，為了向下兼容，僅使用max-age不夠；

Expires 設置一個絕對值，至少會帶來兩個方面的問題：

• 客戶端和服務端時間不同步的問題。往往表現(xiàn)為時區(qū)不同、客戶端時間可被用戶自由修改。
• 很容易在配置后忘記具體的過期時間，導致過期來臨出現(xiàn)浪涌現(xiàn)象（我的理解應該是同時大批量更新的問題）。

Max-Age代表存活時間，記錄的是一個相對時間（例如 6000s），起始時間點是服務器記錄的requet-time。

我們看到除了上面提到的兩個值，還有 session, 這個值代表的意思就是在當前連接下，關閉瀏覽器窗口、斷開與服務連接，該數(shù)據(jù)即失效。

localStorage 數(shù)據(jù)過期

localstorage本身是沒有過期機制的，不過我們可以通過其他手段來擴展，使其能夠滿足我們的數(shù)據(jù)過期的需求。

需求分析：

• 存入數(shù)據(jù)時，順帶傳入過去時間；
• 獲取數(shù)據(jù)時，判斷當前是否過期，過期返回 undefined; 否則正常返回數(shù)據(jù)。

動手實踐

localStorage 和 sessionStorage 都繼承自 Storage 對象， 所以我們可以擴展Storage原型方法。

setStorageWithAge(key, value, age) 方法, 接收三個參數(shù)，第三個參數(shù)代表最大過期時間，我們這里參考 cookie的 Max-Age 的實現(xiàn)，用相對時間來做。

getStorageWithAge(key),內部直接判斷時間是否過期來返回對應的值。

代碼實現(xiàn)：

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等。

這種實現(xiàn)數(shù)據(jù)過期機制的思路比較通用，可以擴展到其他需要設置數(shù)據(jù)過期的場景下。

到此這篇關于如何實現(xiàn)localStorage過期機制的文章就介紹到這了,更多相關localStorage的過期機制內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論