具备有效期的localStorage存储
具备有效期的localStorage存储
类方式
// 具备有效期的localStorage存储-类方式。
class LocalStorageWrapper {
// 存储数据到localStorage,记录下当前存储的时间。
static setItem(key, value) {
try {
const item = {
value,
time: Date.now(),//过期时间-如果不输入则为无限。
};
localStorage.setItem(key, JSON.stringify(item));
} catch (error) {
console.error('存储数据到localStorage时出错:', error);
}
}
// 从localStorage中获取数据,如果数据过期则返回null
static getItem(key, cycle) {
try {
cycle = Number(cycle)
if (isNaN(cycle)) {
cycle = 1000 * 60 * 60 * 24 * 30//默认过期时间为一个月。
}
let data = localStorage.getItem(key)
if (!data) {
return null
}
let { time, value } = JSON.parse(data)
if ((Date.now() - time) > cycle) {
localStorage.removeItem(key)
return null
}
return value
} catch (error) {
console.error('从localStorage中获取数据时出错:', error);
return null;
}
}
// 从localStorage中移除数据
static removeItem(key) {
try {
localStorage.removeItem(key);
} catch (error) {
console.error('从localStorage中移除数据时出错:', error);
}
}
// 清空localStorage中的所有数据
static clear() {
try {
localStorage.clear();
} catch (error) {
console.error('清空localStorage时出错:', error);
}
}
}
// 示例用法:
const userData = {
name: '张三',
age: 30,
email: 'zhangsan@example.com'
};
LocalStorageWrapper.setItem('user', userData);
const storedData = LocalStorageWrapper.getItem('user');
console.log(storedData); // 如果数据未过期,则输出userData对象;否则输出null
const storedData1 = LocalStorageWrapper.getItem('user',1); // 数据过期,则移除旧数据;
console.log(storedData1);
对象方式
// 具备有效期的localStorage存储-对象方式。
const LocalStorageWrapper= {
// 存储数据到localStorage,记录下当前存储的时间。
setItem(key, value) {
try {
const item = {
value,
time: Date.now(),//过期时间-如果不输入则为无限。
};
localStorage.setItem(key, JSON.stringify(item));
} catch (error) {
console.error('存储数据到localStorage时出错:', error);
}
},
// 从localStorage中获取数据,如果数据过期则返回null
getItem(key, cycle) {
try {
cycle = Number(cycle)
if (isNaN(cycle)) {
cycle = 1000 * 60 * 60 * 24 * 30//默认过期时间为一个月。
}
let data = localStorage.getItem(key)
if (!data) {
return null
}
let { time, value } = JSON.parse(data)
if ((Date.now() - time) > cycle) {
localStorage.removeItem(key)
return null
}
return value
} catch (error) {
console.error('从localStorage中获取数据时出错:', error);
return null;
}
},
// 从localStorage中移除数据
removeItem(key) {
try {
localStorage.removeItem(key);
} catch (error) {
console.error('从localStorage中移除数据时出错:', error);
}
},
// 清空localStorage中的所有数据
clear() {
try {
localStorage.clear();
} catch (error) {
console.error('清空localStorage时出错:', error);
}
},
}
/* // 示例用法:
const userData = {
name: '张三',
age: 30,
email: 'zhangsan@example.com'
};
LocalStorageWrapper.setItem('user', userData);
const storedData = LocalStorageWrapper.getItem('user');
console.log(storedData); // 如果数据未过期,则输出userData对象;否则输出null
const storedData1 = LocalStorageWrapper.getItem('user',1); // 数据过期,则移除旧数据;
console.log(storedData1);
具备有效期的localStorage存储的更多相关文章
- 使用sessionStorage、localStorage存储数组与对象(转)
http://my.oschina.net/crazymus/blog/371757 使用sessionStorage.localStorage存储数组与对象 发表于3个月前(2015-01-26 1 ...
- LocalStorage存储
1.localStorage存储服务: .factory('storageSvc', [function () { return { //保存数据 save: function (key, valu ...
- AngularJS进阶(二十九)AngularJS项目开发技巧之localStorage存储
AngularJS项目开发技巧之localStorage存储 注: localStorage深度学习 绪 项目开发完毕,测试阶段发现后台管理端二维码生成有问题,问题在于localStora ...
- 使用sessionStorage、localStorage存储数组与对象
先介绍一下localStorage localStorage对象是HTML5的客户端存储持久化数据的方案.为了能访问到同一个localStorage对象,页面必须来自同一个域名(子域名无效),使用同一 ...
- localStorage存储对象,sessionStorage存储数组对象
前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听,数据只要发生变化就能很方便的自动渲染页面.但随即出现的问题是,之前用户操作的样式都会被重置掉. 例如我勾选了几个 ...
- localStorage存储数组,对象,localStorage,sessionStorage存储数组对象
localStorage存储数组,对象,localStorage,sessionStorage存储数组对象 前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听, ...
- LocalStorage存储JSON对象的问题
LocalStorage存储JSON对象的问题 localStorage - 没有时间限制的数据存储 1 var arr=[1,2,3]; 2 localStorage.setItem(" ...
- localstorage存储对象
之前在客户端存储数据一直用的是cookie,由于有大小等限制,随着html5时代的到来,现在大多数用的是localstorage存储数据: 例如: localStorage.setItem(" ...
- HTML5 WEB Storage - localStorage存储位置在哪
localStorage作为客户端浏览器持久化存储方案 这个是浏览器隔离的,每个浏览器都会把localStorage存储在自己的UserData中,如chrome一般就是 C:\Users\你的计算机 ...
- Android WebView js混合cookie和localStorage存储
一.cookie存储和取出: (1)存储: ------------------- **在loadURL之前调用** -------------------- /** * 同步一下cookie */ ...
随机推荐
- [转帖]缓存与存储的一致性策略:从 CPU 到分布式系统
https://zhuanlan.zhihu.com/p/151745863 在计算机系统设计实践中,我们常常会遇到下图所示架构: 为了解决单个存储器读吞吐无法满足要求的问题,常常需要在存储器上面增加 ...
- [转帖]jmeter正则表达式应用-01篇
如图所示 1.先新建一个login的http请求,然后再login的请求下新增一个正则表达式提取器,增加一个查看结果树查看结果 假如后端接口返回的数据为"{'msg': 'login suc ...
- [转帖]关于winrm远程ps登录执行出现中文乱码和?乱码问题及其解决办法
https://segmentfault.com/a/1190000040566946?utm_source=sf-similar-article python的winrm库提供了命令行远程连接的功能 ...
- java -D的一些学习和使用
背景 java开发的程序有很多进行配置的方式 可以通过 yaml文件或者是xml文件 也可以通过环境变量的方式. 1. 容器的话可以使用 -e 或者是env进行注入 2. K8S的话可以通过 conf ...
- 如何查看服务器的Raid缓存等配置的情况
摘要 最近总遇到同一批机器的IO不一样的情况. 感觉可能跟硬件设备和Raid卡的设置不一样有关系. 所以今天学习研究了下storcli的命令. 希望能够进行一些数据的收集. Storcli简介 sto ...
- Win10 查看无线局域网的密码
1. 打开命令行 输入 control 打开控制面板 2. 进入网络和共享中心 3. 打开连接 4. 使用如下进行查看.
- C# WPF 开发一个 Emoji 表情查看软件
微软在发布 Windows 11 系统的时候,发布过一个开源的 Emoji 表情 fluentui-emoji .因为我经常需要里面的一些表情图片,在仓库一个个查找特别的不方便,所以我做了一个表情查看 ...
- TienChin-课程管理-课程导出
更改 Course.java: /** * 课程ID */ @TableId(value = "course_id", type = IdType.AUTO) @NotNull(m ...
- Webpack4+实现原理
目录 webpack4核心基础 1.webpack开篇 2.webpack配置文件 3.webpack配置文件注意点 4.webpack-sourcemap 5.webpack-file-loader ...
- 2.11 PE结构:添加新的节区
在可执行PE文件中,节(section)是文件的组成部分之一,用于存储特定类型的数据.每个节都具有特定的作用和属性,通常来说一个正常的程序在被编译器创建后会生成一些固定的节,通过将数据组织在不同的节中 ...