JS--localStorage设置过期时间的方案(有示例)
原文网址：JS--localStorage设置过期时间的方案(有示例)_IT利刃出鞘的博客-CSDN博客
简介
说明
本文介绍如何使用localStorage设置数据的过期时间。
问题描述
localStorage是不支持设置过期时间的，cookie虽然支持设置过期时间但它存的数据量很小。所以在需要存一些带过期时间的数据时，就要手写工具来实现。
思路
存数据时：将value封装到一个对象里，这个对象里额外加一个过期时间。
读数据时：如果当前时间超过了过期时间，则返回null或者空对象；否则返回value。
测试结果
如下几种方案的测试结果都是一样的：
第一次获取时获取到了数据；4秒后数据过期了，再获取时成了null。
方案1：封装为函数
js
/*** 写入localStorage* @param key key* @param value value* @param expire 超时时间（以秒为单位）*/
function writeExpire(key, value, expire) {let obj = {time: new Date().getTime(),data: value,expire: expire,};let objStr = JSON.stringify(obj);localStorage.setItem(key, objStr);
}/*** 读出localStorage*/
function readExpire(key) {let value = localStorage.getItem(key);if (!value || value === "null") {return value;}value = JSON.parse(value);if (Date.now() - value.time > value.expire * 1000) {localStorage.removeItem(key);return null;}return value.data;
}
html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="LocalStorageUtil.js"></script>
</head>
<body>
<script>writeExpire("key1", "value1", 2)console.log(readExpire("key1"));sleep(4000).then(() => {console.log(readExpire("key1"));})function sleep(time) {return new Promise((resolve) => setTimeout(resolve, time));}
</script>
</body>
</html>方案2：封装为对象
js
export let localStorageUtil = {/*** 写入localStorage* @param key key* @param value value* @param expire 超时时间（以秒为单位）*/writeExpire: function (key, value, expire) {let obj = {time: new Date().getTime(),data: value,expire: expire,};let objStr = JSON.stringify(obj);localStorage.setItem(key, objStr);},/*** 读出localStorage*/readExpire: function (key) {let value = localStorage.getItem(key);if (!value || value === "null") {return value;}value = JSON.parse(value);if (Date.now() - value.time > value.expire * 1000) {localStorage.removeItem(key);return null;}return value.data;}
}// export default localStorageUtil;html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script type="module">import {localStorageUtil} from "./LocalStorageUtil.js";localStorageUtil.writeExpire("key1", "value1", 2)console.log(localStorageUtil.readExpire("key1"));sleep(4000).then(() => {console.log(localStorageUtil.readExpire("key1"));})function sleep(time) {return new Promise((resolve) => setTimeout(resolve, time));}
</script>
</body>
</html>方案3：ES5扩展localStorage
js
/*** 写入localStorage* @param key key* @param value value* @param expire 超时时间（以秒为单位）*/
Storage.prototype.writeExpire = (key, value, expire) => {let obj = {data: value,time: Date.now(),expire: expire};//localStorage 设置的值不能是对象，转为json字符串localStorage.setItem(key, JSON.stringify(obj));
}/*** 读出localStorage*/
Storage.prototype.readExpire = key => {let value = localStorage.getItem(key);if (!value || value === "null") {return null;}val = JSON.parse(value);if (Date.now() - val.time > val.expire * 1000) {localStorage.removeItem(key);return null;}return val.data;
}
html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script type="module">import './LocalStorageUtil.js';localStorage.writeExpire("key1", "value1", 2)console.log(localStorage.readExpire("key1"));sleep(4000).then(() => {console.log(localStorage.readExpire("key1"));})function sleep(time) {return new Promise((resolve) => setTimeout(resolve, time));}
</script>
</body>
</html>方案4：ES6扩展localStorage
js
class LocalStorageUtil {constructor() {this.storage = window.localStorage;}/*** 写入localStorage* @param key key* @param value value* @param expire 超时时间（以秒为单位）*/writeExpire(key, value, expire) {let tempObj = {};tempObj.key = key;tempObj.value = value;tempObj.expire = Date.now() + expire * 1000;this.storage[key] = JSON.stringify(tempObj);return tempObj;}/*** 读出localStorage*/readExpire(key) {let value = localStorage.getItem(key);if (!value || value === "null") {return null;}let valueObject = JSON.parse(value);let expire = valueObject["expire"];if (!expire) {return valueObject.value;}if (Date.now() >= expire) {this.remove(key);return null;}return valueObject.value}remove(key) {this.storage.removeItem(key);}
}export default LocalStorageUtil;
html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script type="module">import LocalStorageUtil from "./LocalStorageUtil.js";let localStorageUtil = new LocalStorageUtil();localStorageUtil.writeExpire("key1", "value1", 2)console.log(localStorageUtil.readExpire("key1"));sleep(4000).then(() => {console.log(localStorageUtil.readExpire("key1"));})function sleep(time) {return new Promise((resolve) => setTimeout(resolve, time));}
</script>
</body>
</html>相关文章：
JS--localStorage设置过期时间的方案(有示例)
原文网址：JS--localStorage设置过期时间的方案(有示例)_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍如何使用localStorage设置数据的过期时间。 问题描述 localStorage是不支持设置过期时间的，cookie虽然支持设置过期时间但它存的数据量很小。所…...
JNPF开发平台凭什么火？
一、关于低代码 JNPF平台在提供无代码（可视化建模）和低代码（高度可扩展的集成工具以支持跨功能团队协同工作）开发工具上是独一无二的。支持简单、快速地构建及不断改进Web端应用程序，可为整个应用程序的生命周期提供全…...
关于“计算机中由于找不到msvcr120.dll,无法继续执行代码5种解决方法
今天，我想和大家分享一下关于“由于找不到msvcr120.dll,无法继续执行代码5种解决方法”的话题。在我们日常的使用中，有时候会遇到这样的问题：在运行某个程序时，突然提示“无法继续执行代码，因为找不到msvcr120.dll”。…...
LR学习笔记——基本面板
文章目录 面板介绍色彩调整区域明暗调整区域纹理及质感色彩饱和 面板介绍 面板如上图所示 基本可分为几个板块：色彩、明暗、纹理及质感、色彩饱和 色彩调整区域 色温：由蓝色和黄色控制色调：由绿色和洋红控制 互补色：蓝色对黄色&…...
Cloud 微服务
架构 一 单体架构 1 概念 将项⽬所有模块（功能）打成jar或者war，然后部署⼀个进程。 互联网早期，一般的网站应用流量较小，只需一个应用，将所有功能代码都部署在一起就可以，这样可以减少开发、…...
若依前后端分离版，快速上手
哈喽~大家好，这篇来看看若依前后端分离版，快速上手（肝了挺久的）。 🥇个人主页：个人主页 🥈 系列专栏：【Springboot和Vue全栈开发】…...
Java-抽象类、抽象方法
【1】抽象类和抽象方法的关系： 抽象类中可以定义0-n个抽象方法。 【2】抽象类作用： 在抽象类中定义抽象方法，目的是为了为子类提供一个通用的模板，子类可以在模板的基础上进行开发，先重写父类的抽象方法，…...
南京--ChatGPT/GPT4 科研实践应用
2023年随着OpenAI开发者大会的召开，最重磅更新当属GPTs，多模态API，未来自定义专属的GPT。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义，不亚于互联网和个人电脑的问世。360创始人周鸿祎认为未来各行各业如果不能搭上这班车…...
【VRTK】【VR开发】【Unity】7-配置交互能力和向量追踪
【前情提要】 目前为止，我们虽然设定了手模型和动画，还能够正确根据输入触发动作，不过还未能与任何物体互动。要互动，需要给手部设定相应的Interactor能力。 【配置Interactor的抓取功能】 在Hierarchy中选中[VRTK_CAMERA_RIGS_SETUP] ➤ Camera Rigs, Tracked Alias ➤ …...
【JS】Chapter14-深入面向对象
站在巨人的肩膀上 黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程 （十四）深入面向对象 1. 编程思想 1.1 面向过程介绍 面向过程就是分析出解决问题所需要的步骤，…...
RabbitMQ消息队列快速入门
RabbitMQ消息队列快速入门 初始MQ MQ全称为Message Queue，即消息队列，是在消息的传输过程中保存消息的容器。它是典型的生产者-消费者模型。 生产者不断向消息队列中生产消息，消费者不断的从队列中获取消息。消息的生产和消费都是异步的&am…...
django DRF认证组件
一、学习DRF的认证类； 设计：LoginView不登录就可以访问，UserView和OrderView需要通过认证后才能访问； 1、urls.py urlpatterns [path(login/, views.LoginView.as_view()),path(user/, views.UserView.as_view()),path(order/,…...
操作系统（三）| 进程管理上 进程状态 同步 互斥
目录 1 进程和程序区别 2 进程状态 2.1 进程的5种基本状态 2.2 进程状态之间转换 2.3 七状态模型 3 进程描述 3.1 进程控制块 PCB 3.2 进程块组织方式 4 进程控制 5 进程同步 互斥 5.1 区分进程互斥和同步 5.2 核心方案 5.3 其他方案 方案1 设置锁变量 方案2 严…...
Postman插件如何安装（一）
我们chrome插件网热门推荐的软件之一就是postman。但是postman的适应平台分为：postman chrome应用程序，postman应用程序，postman插件。谷歌应用商店从2018年3月开始停止chrome应用程序的更新。除非继续使用老版本的postman chrome应用程序&am…...
在回调之间共享数据
可以在 App 中为 UI 组件编写回调函数，以指定用户与其交互时的行为方式。 在具有多个相互依赖的 UI 组件的 App 中，回调函数通常必须访问主 App 函数中定义的数据，或与其他回调函数共享数据。例如，如果创建一个具有列表框的 App&a…...
我在CSDN开组会1-蒙特卡洛模拟在矿床学的应用展望
各位老师、同学们，大家好。今天组会的内容是蒙特卡洛模拟在矿床学的应用展望。 为什么要讲蒙特卡洛模拟呢，因为我发现在地质学方面已经有不少应用，但是蒙特卡洛模拟延伸的知识太晦涩了，劝退了很多探究者们。因此，计划…...
Jmeter 性能测试基础！
压力测试 压力测试分两种场景：一种是单场景，压一个接口的；第二种是混合场景，多个有关联的接口。压测时间，一般场景都运行10-15分钟。如果是疲劳测试，可以压一天或一周，根据实际情况来定。 压测任…...
【赠书第6期】MATLAB科学计算从入门到精通
文章目录 前言 1 安装与配置 2 变量定义 3 数据处理 4 绘图 5 算法设计 6 程序调试 7 推荐图书 8 粉丝福利 前言 MATLAB 是一种高级的科学计算和数据可视化平台。它由 MathWorks 公司开发，是科学研究、数据分析和工程实践中非常常用的一种软件工具。本文将…...
Java语言基础第五天
精华笔记： 循环结构： for结构：应用率最高，与次数相关的循环 三种结构如何选择： 先看循环是否与次数相关： 若相关-----------------------------直接上for 若无关，再看要素1与要素3的代码是否相…...
linux网络——HTTPS加密原理
目录 一.HTTPS概述 二.概念准备 三.为什么要加密 四.常⻅的加密⽅式 1.对称加密 2.⾮对称加密 五.数据摘要，数字签名 六.HTTPS的加密过程探究 1.方案一——只使用对称加密 2.方案二——只使⽤⾮对称加密 3.方案三——双⽅都使⽤⾮对称加密 4.方案四——⾮…...
ARMv8 AArch64 ID寄存器解析与系统编程实践
1. AArch64 ID寄存器体系解析在ARMv8架构中，AArch64通过一组特殊的系统寄存器来标识处理器实现的指令集特性和功能扩展，这些寄存器统称为ID寄存器。作为系统程序员，理解这些寄存器的编码机制和使用方法，对于编写高性能、可移植的系…...
ScaleHLS：基于MLIR的下一代HLS编译器框架，实现FPGA高性能计算与AI加速
1. 项目概述：ScaleHLS，一个基于MLIR的下一代HLS编译器框架 如果你正在FPGA（现场可编程门阵列）领域进行高性能计算或AI加速器的开发，那么“高抽象层级设计”与“后端实现效率”之间的矛盾，一定是你绕不开的痛…...
利用 workbuddy 小龙虾 对CodeBuddy开发历史对话 进行开发总结 提高以后的开发效果
利用 workbuddy 小龙虾 对CodeBuddy开发历史对话 进行开发总结 提高以后的开发效果 提示词 你能读取 CodeBuddy CN.历史记录吗 "C:\Users\yang\AppData\Local\Programs\CodeBuddy CN\CodeBuddy CN.exe" 和 F:\Programs\CodeBuddy\CodeBuddy.exe 每一个对话框 都总结…...
)
基于云端OpenClaw的情绪互动机器人系统-Milk-V Duo S + 机器人 端开发(5)
上周我打通了Milk-V Duo S和机器人的串口控制的脉络，同时制作了两个动作组：下蹲、自由飞翔。 阶段状态环境搭建✅ 完成网络配置✅ 完成串口控制✅ 完成动作调度✅ 完成序列执行控制✅ 完成时间控制✅ 完成部分动作组制作✅ 完成线程执行锁✅ 完成云端接…...
Cursr：多屏多设备无缝交互的鼠标门户工具配置指南
1. 项目概述：Cursr，一个重新定义多屏与多设备交互的鼠标门户工具如果你和我一样，日常需要在两块、三块甚至更多显示器之间来回穿梭，或者桌面上摆着不止一台电脑（比如一台Windows主力机加一台MacBook）&#…...
为什么数据治理越做越累？因为你忽略了最重要的事情...
编 辑：老彭来 源：大数据架构师大家好～ 今天跟大家分享的，是我读《数据治理项目管理手册》之后的收获和对数据治理项目管理的一些感悟。做数据治理的小伙伴应该都有过这样的崩溃时刻：项目启动时雄心勃勃，想着…...
桌面软件 vs 微信小程序：2026年B站字幕提取工具推荐怎么选
同样是提取B站视频字幕，用传统的桌面软件和用微信小程序的体验差别比较大。前者需要下载安装、占用硬盘空间，后者打开就能用。我会先讲提词匠这个微信小程序，因为它和B站字幕提取的需求对得特别紧——不仅能处理本地视频，还能直接…...
Nacos客户端日志太吵？Spring Boot/Cloud项目里这样配置，瞬间清净
Nacos客户端日志优化实战：Spring Boot/Cloud项目静音指南 微服务架构下，Nacos作为配置中心和注册中心的核心组件，其客户端日志输出常常成为开发者调试时的"甜蜜负担"。想象一下这样的场景：你在IDEA中启动Spring Cloud服…...
2025届最火的六大AI论文网站实际效果
Ai论文网站排名（开题报告、文献综述、降aigc率、降重综合对比） TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 专为研究生以及科研人员所设计的AI开题报告工具，乃是基于大语言模型的智能写作辅…...
ZynqMP SD卡启动全记录：从Vivado配置到Linux命令行（基于黑金AXU2CGB板）
ZynqMP SD卡启动实战指南：黑金AXU2CGB开发板全流程解析 当一块崭新的ZynqMP开发板摆在面前，如何快速搭建完整的启动环境往往是开发者面临的第一个挑战。不同于传统嵌入式系统，ZynqMP的异构架构和多重启动阶段让许多初次接触的工程师感到困惑。…...