JavaScript设置失效时间清除本地存储数据的几种方法

 更新时间:2025年02月25日 11:04:34   作者:the_flash  
这篇文章介绍了如何使用localStorage和sessionStorage设置失效时间来清除本地存储的数据,并提供了一种自动清除过期数据的方法,需要的朋友可以参考下

要通过设置失效时间清除本地存储的数据,可以使用 localStorage 或 sessionStorage,并结合 JavaScript 实现。以下是具体步骤:

1. 使用 localStorage 存储数据并设置失效时间

// 存储数据并设置失效时间(单位:毫秒)
function setLocalStorageWithExpiry(key, value, expiryInMilliseconds) {
    const now = new Date();
    const item = {
        value: value,
        expiry: now.getTime() + expiryInMilliseconds
    };
    localStorage.setItem(key, JSON.stringify(item));
}

// 获取数据并检查是否失效
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;
}

// 示例:存储数据并设置 1 小时后失效
setLocalStorageWithExpiry('myKey', 'myValue', 60 * 60 * 1000);

// 示例:获取数据
const value = getLocalStorageWithExpiry('myKey');
console.log(value); // 输出: myValue (如果未失效) 或 null (如果已失效)

2. 使用 sessionStorage 存储数据并设置失效时间

sessionStorage 的生命周期与浏览器会话相关,关闭浏览器后数据会被清除。如果需要手动设置失效时间,可以使用类似 localStorage 的方法。

// 存储数据并设置失效时间(单位:毫秒)
function setSessionStorageWithExpiry(key, value, expiryInMilliseconds) {
    const now = new Date();
    const item = {
        value: value,
        expiry: now.getTime() + expiryInMilliseconds
    };
    sessionStorage.setItem(key, JSON.stringify(item));
}

// 获取数据并检查是否失效
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;
}

// 示例:存储数据并设置 1 小时后失效
setSessionStorageWithExpiry('myKey', 'myValue', 60 * 60 * 1000);

// 示例:获取数据
const value = getSessionStorageWithExpiry('myKey');
console.log(value); // 输出: myValue (如果未失效) 或 null (如果已失效)

3. 自动清除过期数据

你可以定期检查并清除过期的数据:

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

// 每隔一段时间检查一次
setInterval(clearExpiredLocalStorage, 60 * 60 * 1000); // 每小时检查一次

通过这些方法,你可以有效地管理本地存储的数据,并确保在设定的失效时间后自动清除。

到此这篇关于JavaScript设置失效时间清除本地存储数据的几种方法的文章就介绍到这了,更多相关JavaScript设置失效时间内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js正则表达式之前瞻后顾与非捕获分组

    js正则表达式之前瞻后顾与非捕获分组

    话说自从学前端以来听到过多次这样的"笑话",程序员分为会正则的和不会正则的,可见正则的重要性,这篇文章主要给大家介绍了关于js正则表达式之前瞻后顾与非捕获分组的相关资料,需要的朋友可以参考下
    2021-10-10
  • js实现文字截断功能

    js实现文字截断功能

    这篇文章主要为大家详细介绍了js代码如何实现文字截断功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • Elasticsearch实现复合查询高亮结果功能

    Elasticsearch实现复合查询高亮结果功能

    这篇文章主要介绍了Elasticsearch实现复合查询,高亮结果功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • JS实现页面长时间不操作退出到登录页面的示例代码

    JS实现页面长时间不操作退出到登录页面的示例代码

    这篇文章主要介绍了JS实现页面长时间不操作退出到登录页面的示例代码,通过在head标签中引入jquey和页面长时间不操作的js页面,结合实例代码讲解的非常详细,需要的朋友可以参考下
    2024-03-03
  • 回车直接实现点击某按钮的效果即触发单击事件

    回车直接实现点击某按钮的效果即触发单击事件

    这篇文章主要介绍了回车直接实现点击某按钮的效果即触发单击事件,需要的朋友可以参考下
    2014-02-02
  • JS自动生成动态HTML验证码页面

    JS自动生成动态HTML验证码页面

    这篇文章主要介绍了JS自动生成动态HTML验证码页面,输入错误自动清空输入框的功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 详解JavaScript自定义函数

    详解JavaScript自定义函数

    这篇文章主要介绍了JavaScript自定义函数的相关资料,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • JS实现利用两个队列表示一个栈的方法

    JS实现利用两个队列表示一个栈的方法

    这篇文章主要介绍了JS实现利用两个队列表示一个栈的方法,简单分析了使用两个队列表示一个栈的原理,并结合具体实例分析了javascript相关操作技巧,需要的朋友可以参考下
    2017-12-12
  • 纯javascript实现简单下拉刷新功能

    纯javascript实现简单下拉刷新功能

    这篇文章主要介绍了纯javascript实现简单下拉刷新功能,没有借助任何的框架,十分简单实用,有需要的小伙伴来参考下吧。
    2015-03-03
  • webpack-dev-server自动更新页面方法

    webpack-dev-server自动更新页面方法

    下面小编就为大家分享一篇webpack-dev-server自动更新页面方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02

最新评论