具备有效期的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存储的更多相关文章

  1. 使用sessionStorage、localStorage存储数组与对象(转)

    http://my.oschina.net/crazymus/blog/371757 使用sessionStorage.localStorage存储数组与对象 发表于3个月前(2015-01-26 1 ...

  2. LocalStorage存储

     1.localStorage存储服务: .factory('storageSvc', [function () { return { //保存数据 save: function (key, valu ...

  3. AngularJS进阶(二十九)AngularJS项目开发技巧之localStorage存储

    AngularJS项目开发技巧之localStorage存储       注: localStorage深度学习 绪 项目开发完毕,测试阶段发现后台管理端二维码生成有问题,问题在于localStora ...

  4. 使用sessionStorage、localStorage存储数组与对象

    先介绍一下localStorage localStorage对象是HTML5的客户端存储持久化数据的方案.为了能访问到同一个localStorage对象,页面必须来自同一个域名(子域名无效),使用同一 ...

  5. localStorage存储对象,sessionStorage存储数组对象

    前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听,数据只要发生变化就能很方便的自动渲染页面.但随即出现的问题是,之前用户操作的样式都会被重置掉. 例如我勾选了几个 ...

  6. localStorage存储数组,对象,localStorage,sessionStorage存储数组对象

    localStorage存储数组,对象,localStorage,sessionStorage存储数组对象   前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听, ...

  7. LocalStorage存储JSON对象的问题

    LocalStorage存储JSON对象的问题   localStorage - 没有时间限制的数据存储 1 var arr=[1,2,3]; 2 localStorage.setItem(" ...

  8. localstorage存储对象

    之前在客户端存储数据一直用的是cookie,由于有大小等限制,随着html5时代的到来,现在大多数用的是localstorage存储数据: 例如: localStorage.setItem(" ...

  9. HTML5 WEB Storage - localStorage存储位置在哪

    localStorage作为客户端浏览器持久化存储方案 这个是浏览器隔离的,每个浏览器都会把localStorage存储在自己的UserData中,如chrome一般就是 C:\Users\你的计算机 ...

  10. Android WebView js混合cookie和localStorage存储

    一.cookie存储和取出: (1)存储: ------------------- **在loadURL之前调用** -------------------- /** * 同步一下cookie */ ...

随机推荐

  1. [转帖]S3FS 简介及部署

    PS:文章一般都会先首发于我的个人Blog上:S3FS 简介及部署 · TonghuaRoot's BloG. ,有需要的小伙伴可以直接订阅我的Blog,获取最新内容. 0x00 前言 S3FS可以把 ...

  2. [转帖]实战瓶颈定位-我的MySQL为什么压不上去

    https://plantegg.github.io/2023/06/20/%E5%AE%9E%E6%88%98%E7%93%B6%E9%A2%88%E5%AE%9A%E4%BD%8D-%E6%88% ...

  3. 容器方式运行Mysql8.0.26的方法

    容器化运行Mysql8.0.26测试环境的方法 1. 前言 之前为了好处理,都是二进制包的方式安装mysql,但是有时候需要下载和安装也比较费时费力, 今天中午在弄Oracle RAC时想着以后能够容 ...

  4. linux线程调度策略

    linux线程调度策略 这是一篇非常好的关于线程调度的资料,翻译自shed 目录 linux线程调度策略 Scheduling policies SCHED_FIFO: First in-first ...

  5. 手撕Vue-Router-实现router-view

    前言 在上一篇 [手撕Vue-Router-实现router-link] 中,我们实现了 router-link 组件,这一篇我们来实现 router-view 组件. 实现思路 router-vie ...

  6. ​【心理学CPCI收录,AP独立出版】 2023年应用心理学与现代化教育国际学术会议(ICAPME 2023)

    ​[心理学CPCI收录,AP独立出版] 2023年应用心理学与现代化教育国际学术会议(ICAPME 2023) 大会官网:www.icapme.org 大会时间:2023年9月22-24日 大会地点: ...

  7. 解锁搜索新境界!让文本语义匹配助你轻松找到你需要的一切!(快速上手baseline)

    解锁搜索新境界!让文本语义匹配助你轻松找到你需要的一切!(快速上手baseline) 实现了多种相似度计算.匹配搜索算法,支持文本.图像,python3开发,pip安装,开箱即用. 文本相似度计算(文 ...

  8. 特定领域知识图谱融合方案:文本匹配算法之预训练Simbert、ERNIE-Gram单塔模型等诸多模型【三】

    特定领域知识图谱融合方案:文本匹配算法之预训练模型SimBert.ERNIE-Gram 文本匹配任务在自然语言处理中是非常重要的基础任务之一,一般研究两段文本之间的关系.有很多应用场景:如信息检索.问 ...

  9. PE格式:实现ELF结构解析工具

    ELF文件格式,是一个开放的可执行文件和链接文件格式,其主要工作在Linux系统上,是一种用于二进制文件.可执行文件.目标代码.共享库和核心转储格式文件,ELF文件格式类似于PE格式,但比起PE结构来 ...

  10. 28图图解Raft协议,so easy~~

    大家好,我是三友~~ 在之前写的<万字+20张图探秘Nacos注册中心核心实现原理> 这篇文章中我留了一个彩蛋 当文章点赞量突破28个,就单独写一篇关于Raft协议的文章 既然现在文章点赞 ...