快捷導(dǎo)航

JavaScript設(shè)置失效時(shí)間清除本地存儲(chǔ)數(shù)據(jù)的幾種方法

更新時(shí)間：2025年02月25日 11:04:34 作者：the_flash

這篇文章介紹了如何使用localStorage和sessionStorage設(shè)置失效時(shí)間來清除本地存儲(chǔ)的數(shù)據(jù),并提供了一種自動(dòng)清除過期數(shù)據(jù)的方法,需要的朋友可以參考下

1. 使用 localStorage 存儲(chǔ)數(shù)據(jù)并設(shè)置失效時(shí)間

// 存儲(chǔ)數(shù)據(jù)并設(shè)置失效時(shí)間（單位：毫秒）
function setLocalStorageWithExpiry(key, value, expiryInMilliseconds) {
    const now = new Date();
    const item = {
        value: value,
        expiry: now.getTime() + expiryInMilliseconds
    };
    localStorage.setItem(key, JSON.stringify(item));
}

// 獲取數(shù)據(jù)并檢查是否失效
function getLocalStorageWithExpiry(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;
}

// 示例：存儲(chǔ)數(shù)據(jù)并設(shè)置 1 小時(shí)后失效
setLocalStorageWithExpiry('myKey', 'myValue', 60 * 60 * 1000);

// 示例：獲取數(shù)據(jù)
const value = getLocalStorageWithExpiry('myKey');
console.log(value); // 輸出: myValue (如果未失效) 或 null (如果已失效)

2. 使用 sessionStorage 存儲(chǔ)數(shù)據(jù)并設(shè)置失效時(shí)間

sessionStorage 的生命周期與瀏覽器會(huì)話相關(guān)，關(guān)閉瀏覽器后數(shù)據(jù)會(huì)被清除。如果需要手動(dòng)設(shè)置失效時(shí)間，可以使用類似 localStorage 的方法。

// 存儲(chǔ)數(shù)據(jù)并設(shè)置失效時(shí)間（單位：毫秒）
function setSessionStorageWithExpiry(key, value, expiryInMilliseconds) {
    const now = new Date();
    const item = {
        value: value,
        expiry: now.getTime() + expiryInMilliseconds
    };
    sessionStorage.setItem(key, JSON.stringify(item));
}

// 獲取數(shù)據(jù)并檢查是否失效
function getSessionStorageWithExpiry(key) {
    const itemStr = sessionStorage.getItem(key);
    if (!itemStr) {
        return null;
    }
    const item = JSON.parse(itemStr);
    const now = new Date();
    if (now.getTime() > item.expiry) {
        sessionStorage.removeItem(key);
        return null;
    }
    return item.value;
}

// 示例：存儲(chǔ)數(shù)據(jù)并設(shè)置 1 小時(shí)后失效
setSessionStorageWithExpiry('myKey', 'myValue', 60 * 60 * 1000);

// 示例：獲取數(shù)據(jù)
const value = getSessionStorageWithExpiry('myKey');
console.log(value); // 輸出: myValue (如果未失效) 或 null (如果已失效)

3. 自動(dòng)清除過期數(shù)據(jù)

你可以定期檢查并清除過期的數(shù)據(jù)：

function clearExpiredLocalStorage() {
    for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        getLocalStorageWithExpiry(key);
    }
}

// 每隔一段時(shí)間檢查一次
setInterval(clearExpiredLocalStorage, 60 * 60 * 1000); // 每小時(shí)檢查一次

通過這些方法，你可以有效地管理本地存儲(chǔ)的數(shù)據(jù)，并確保在設(shè)定的失效時(shí)間后自動(dòng)清除。

到此這篇關(guān)于JavaScript設(shè)置失效時(shí)間清除本地存儲(chǔ)數(shù)據(jù)的幾種方法的文章就介紹到這了,更多相關(guān)JavaScript設(shè)置失效時(shí)間內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: