具备有效期的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. [转帖]如何在 Linux 中使用ss命令监控网络连接

    https://zhuanlan.zhihu.com/p/99421574 ss命令是用于在Linux系统上显示与网络套接字相关的信息的工具. 该工具显示netstat命令的更多详细信息,该命令用于显 ...

  2. UOS关闭激活提示: Your system is not activated. Please activate as soon as possible for normal use.

    最近公司里面进行UOS的兼容性验证,但是系统总是会提示: Your system is not activated. Please activate as soon as possible for n ...

  3. 模块化Common.js与ES6

    为什么要模块化开发 1. 依赖关系(a文件依赖b文件中的方法,b文件必须在a文件之前引入) 2. 命名问题 (多个文件变量名,方法名相同会出现覆盖) 3. 代码组织(后期不好维护) 模块化规范有 1. ...

  4. ABP vNext系列文章04---DynamicClient动态代理

    一.动态代理在ABP系统中的应用 1.它主要在做什么事件 之前开发系统想要在后台调用别的服务都是用HttpClient发起请求,在abp vnext中不需要我们这样做了, 你只要知道服务调用的接口方法 ...

  5. 样本数量不平衡问题方案(Focal Loss & Circle Loss)

    1.Focal Loss focal loss是最初由何恺明提出的,最初用于图像领域解决数据不平衡造成的模型性能问题.本文试图从交叉熵损失函数出发,分析数据不平衡问题,focal loss与交叉熵损失 ...

  6. 3.6 Windows驱动开发:内核进程汇编与反汇编

    在笔者上一篇文章<内核MDL读写进程内存>简单介绍了如何通过MDL映射的方式实现进程读写操作,本章将通过如上案例实现远程进程反汇编功能,此类功能也是ARK工具中最常见的功能之一,通常此类功 ...

  7. 使用C++实现Range序列生成器

    在C++编程中,经常需要迭代一系列数字或其他可迭代对象.通常,这需要编写复杂的循环结构,但有一种精妙的方法可以使这一过程变得更加简单和可读.如果你使用过Python语言那么一定对Range语句非常的数 ...

  8. 14.6 Socket 应用结构体传输

    当在套接字编程中传输结构体时,可以将结构体序列化为字符串(即把结构体的所有成员打包成一个字符串),然后将字符串通过套接字传输到对端,接收方可以将字符串解析为结构体,然后使用其中的成员数据.这种方法通常 ...

  9. C/C++ 通用ShellCode的编写与调用

    首先,我们的ShellCode代码需要自定位,因为我们的代码并不是一个完整的EXE可执行程序,他没有导入表无法定位到当前系统中每个函数的虚拟地址,所以我们直接获取到Kernel32.dll的基地址,里 ...

  10. Vulkan学习苦旅06:创建渲染通道(VkRenderPass)

    对于一个复杂的图形应用程序,需要多个过程的配合,以生成图像的各个部分.通常,各个过程间存在着依赖关系,例如某个过程生成的图像(输出)被另一个过程使用(作为此过程的输入).在Vulkan中,每个过程被称 ...