前言

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

帶著這樣的疑問(wèn)，我們一層層剝開(kāi)其神秘的面紗。

cookie過(guò)期機(jī)制

我們知道Expires和Max-age都可以設(shè)置cookie的過(guò)期時(shí)間，那么兩者存在什么樣的異同點(diǎn)呢？

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

Expires 設(shè)置的是絕對(duì)值，即直接設(shè)置當(dāng)前cookie在什么時(shí)候過(guò)期。 就像下面圖中的這樣, GMT格式。

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

Expires 設(shè)置一個(gè)絕對(duì)值，至少會(huì)帶來(lái)兩個(gè)方面的問(wèn)題：

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

Max-Age代表存活時(shí)間，記錄的是一個(gè)相對(duì)時(shí)間（例如 6000s），起始時(shí)間點(diǎn)是服務(wù)器記錄的requet-time。

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

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

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

需求分析：

• 存入數(shù)據(jù)時(shí)，順帶傳入過(guò)去時(shí)間；
• 獲取數(shù)據(jù)時(shí)，判斷當(dāng)前是否過(guò)期，過(guò)期返回 undefined; 否則正常返回?cái)?shù)據(jù)。

動(dòng)手實(shí)踐

localStorage 和 sessionStorage 都繼承自 Storage 對(duì)象， 所以我們可以擴(kuò)展Storage原型方法。

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

getStorageWithAge(key),內(nèi)部直接判斷時(shí)間是否過(guò)期來(lái)返回對(duì)應(yīng)的值。

代碼實(shí)現(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, //存儲(chǔ)值
        time: Date.now(), //存值時(shí)間戳
        maxAge: age, //過(guò)期時(shí)間
    };
    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;
};

嘗試調(diào)用：

localStorage.setStorageWithAge('amingxiansen', '測(cè)試過(guò)期時(shí)間', 30000);
localStorage.getStorageWithAge('amingxiansen');

設(shè)定30s的過(guò)期時(shí)間，過(guò)期之前和過(guò)期之后獲取到的結(jié)果。

參考文章

• localStorage設(shè)置有效期、過(guò)期時(shí)間

總結(jié)

Storage只是瀏覽器的一種存儲(chǔ)方案，除此之外還有IndexDB、WebSQL等。

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

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

最新評(píng)論