具备有效期的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下在文件内部指定行(首行、末尾行等)插入内容

    https://blog.csdn.net/drbing/article/details/52153766 1.在文件的首行插入指定内容: :~$ sed -i "1i#! /bin/sh ...

  2. [转帖]Mysql 常用命令行,持续补充

    https://www.cnblogs.com/wzj1223/p/13152446.html 1.常用命令行 # 登录Mysql mysql -uroot -proot # 查看所有数据库 show ...

  3. [转帖]iozone - 性能压力测试工具

    <存储工具系列文章>主要介绍存储相关的测试和调试工具,包括不限于dd.fio.vdbench.iozone.iometer.cosbench等性能负载工具,及strace等调试工具. 1 ...

  4. 二进制安装Mysql数据库的快速方法

    二进制安装Mysql数据库的快速方法 摘要 还是国产操作系统 rpm包可能不太兼容,为了简单准备使用tar包方式安装mysql数据库 这里简单记录一下过程. 为以后使用. 介质下载 下载二进制的tar ...

  5. 【APP 逆向百例】Frida 初体验,root 检测与加密字符串定位

    声明 本文章中所有内容仅供学习交流使用,不用于其他任何目的,不提供完整代码,抓包内容.敏感网址.数据接口等均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关! 本文章未经许 ...

  6. DotLiquid(.net模版引擎)

    可用生成C#代码,在KSFramework中有使用:https://github.com/mr-kelly/KSFramework 主页:http://dotliquidmarkup.org/ 文档: ...

  7. python.exe和pythonw.exe的区别(区分.py、.pyw、.pyc、.pyo文件)

    python和pythonw 在Windows系统搭建好Python的环境后,进入Python的安装目录,大家会发现目录中有python.exe和pythonw.exe两个程序.如下图所示: 它们到底 ...

  8. 从零开始配置vim(31)——git 配置

    很抱歉又拖更了这么久了,在这个新公司我想快速度过试用期,所以大部分的精力主要花在日常工作上面.但是这个系列还是得更新下去,平时只能抽有限的业余时间来准备.这就导致我写这些文章就慢了一些. 废话不多说, ...

  9. 策略模式学习,使用go实现策略模式

    策略模式 定义 优点 缺点 使用场景 代码实现 策略模式和工厂模式的区别 参考 策略模式 定义 策略模式定义了算法家族,分别封装起来,让他们之间可以相互替换,此模式让算法的变化,不会影响到客户端的使用 ...

  10. GPTs prompts灵感库:创意无限,专业级创作指南,打造吸睛之作的秘诀

    GPTs prompts灵感库:创意无限,专业级创作指南,打造吸睛之作的秘诀 优质prompt展示 1.1 极简翻译 中英文转换 你是一个极简翻译工具,请在对话中遵循以下规则: - Prohibit ...