怎么實(shí)現(xiàn)localStorage的過(guò)期機(jī)制

今天小編給大家分享一下怎么實(shí)現(xiàn)localStorage的過(guò)期機(jī)制的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lá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)題：

• 客戶(hù)端和服務(wù)端時(shí)間不同步的問(wèn)題。往往表現(xiàn)為時(shí)區(qū)不同、客戶(hù)端時(shí)間可被用戶(hù)自由修改。

• 很容易在配置后忘記具體的過(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ò)展，使其能夠滿(mǎn)足我們的數(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é)果。

以上就是“怎么實(shí)現(xiàn)localStorage的過(guò)期機(jī)制”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。