具备有效期的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 */ ...
随机推荐
- [转帖]优化命令之iotop命令
文章目录 引言 一.iotop简介 1.iotop安装 2.iotop语法 3.iotop参数 二.I/O的常用快捷键 三.交互模式 四.iotop示例 1.只显示正在产生I/O的进程 2.显示指定P ...
- Find -mtime 的图解
- Vue3中readonly 和 shallowReadonly和toRaw
1.readonly 深度只读 被readonly包裹的数据只能够读取. 是一个深度只读,不能够修改. 我们看一下面的代码. 我们想修改值,但是修改后视图无响应. 并且控制台警告目标为只读 reado ...
- 【JS 逆向百例】网洛者反爬练习平台第一题:JS 混淆加密,反 Hook 操作
关注微信公众号:K哥爬虫,持续分享爬虫进阶.JS/安卓逆向等技术干货! 声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后 ...
- python中,Microsoft Visual C++ 14.0 or greater is required问题解决方案
今天在写一个小程序,安装依赖的时候发现这个问题,平时都是直接安装Visual Studio解决,但是这个安装太大了,所以解决看看怎么安装是最方便的,最容易解决的. 下面这个就是出现的问题: build ...
- 2021美亚杯团队赛write up
个人赛与团队赛下载文件解压密码:MeiyaCup2021 加密容器解密密码: uR%{)Y'Qz-n3oGU`ZJo@(1ntxp8U1+bW;JlZH^I4%0rxf;[N+eQ)Lolrw& ...
- 5.11 汇编语言:仿写IF条件语句
条件语句,也称为IF-ELSE语句,是计算机编程中的一种基本控制结构.它允许程序根据条件的真假来执行不同的代码块.条件语句在处理决策和分支逻辑时非常有用.一般来说,条件语句由IF关键字.一个条件表达式 ...
- Redis 数据库配置与应用
Redis 是一个key-value存储系统.Redis是一个开源的使用ANSI C语言编写.遵守BSD协议.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. ...
- Git企业开发控制理论和实操-从入门到深入(三)|分支管理
前言 那么这里博主先安利一些干货满满的专栏了! 首先是博主的高质量博客的汇总,这个专栏里面的博客,都是博主最最用心写的一部分,干货满满,希望对大家有帮助. 高质量博客汇总 然后就是博主最近最花时间的一 ...
- 小型命令解析器|minShell|多进程|重定向|进程控制【超详细的代码注释和解释】
前言 那么这里博主先安利一下一些干货满满的专栏啦! 手撕数据结构https://blog.csdn.net/yu_cblog/category_11490888.html?spm=1001.2014. ...