具备有效期的sessionStorage存储

类方式

// 具备有效期的sessionStorage存储-类方式。
class SessionStorageWrapper {
// 存储数据到sessionStorage,记录下当前存储的时间。
static setItem(key, value) {
try {
const item = {
value,
time: Date.now(),//过期时间-如果不输入则为无限。
};
sessionStorage.setItem(key, JSON.stringify(item));
} catch (error) {
console.error('存储数据到sessionStorage时出错:', error);
}
} // 从sessionStorage中获取数据,如果数据过期则返回null
static getItem(key, cycle) {
try {
cycle = Number(cycle)
if (isNaN(cycle)) {
cycle = 1000 * 60 * 60 * 24 * 30//默认过期时间为一个月。
}
let data = sessionStorage.getItem(key)
if (!data) {
return null
}
let { time, value } = JSON.parse(data)
if ((Date.now() - time) > cycle) {
sessionStorage.removeItem(key)
return null
}
return value
} catch (error) {
console.error('从sessionStorage中获取数据时出错:', error);
return null;
}
} // 从sessionStorage中移除数据
static removeItem(key) {
try {
sessionStorage.removeItem(key);
} catch (error) {
console.error('从sessionStorage中移除数据时出错:', error);
}
} // 清空sessionStorage中的所有数据
static clear() {
try {
sessionStorage.clear();
} catch (error) {
console.error('清空sessionStorage时出错:', error);
}
}
}
// 示例用法:
const userData = {
name: '张三',
age: 30,
email: 'zhangsan@example.com'
};
SessionStorageWrapper.setItem('user', userData);
const storedData = SessionStorageWrapper.getItem('user');
console.log(storedData); // 如果数据未过期,则输出userData对象;否则输出null const storedData1 = SessionStorageWrapper.getItem('user',1); // 数据过期,则移除旧数据;
console.log(storedData1);

对象方式

// 具备有效期的sessionStorage存储-对象方式。
export const SessionStorageWrapper= {
// 存储数据到sessionStorage,记录下当前存储的时间。
setItem(key, value) {
try {
const item = {
value,
time: Date.now(),//过期时间-如果不输入则为无限。
};
sessionStorage.setItem(key, JSON.stringify(item));
} catch (error) {
console.error('存储数据到sessionStorage时出错:', error);
}
}, // 从sessionStorage中获取数据,如果数据过期则返回null
getItem(key, cycle) {
try {
cycle = Number(cycle)
if (isNaN(cycle)) {
cycle = 1000 * 60 * 60 * 24 * 30//默认过期时间为一个月。
}
let data = sessionStorage.getItem(key)
if (!data) {
return null
}
let { time, value } = JSON.parse(data)
if ((Date.now() - time) > cycle) {
sessionStorage.removeItem(key)
return null
}
return value
} catch (error) {
console.error('从sessionStorage中获取数据时出错:', error);
return null;
}
}, // 从sessionStorage中移除数据
removeItem(key) {
try {
sessionStorage.removeItem(key);
} catch (error) {
console.error('从sessionStorage中移除数据时出错:', error);
}
}, // 清空sessionStorage中的所有数据
clear() {
try {
sessionStorage.clear();
} catch (error) {
console.error('清空sessionStorage时出错:', error);
}
},
}
// 示例用法:
const userData = {
name: '张三',
age: 30,
email: 'zhangsan@example.com'
};
SessionStorageWrapper.setItem('user', userData);
const storedData = SessionStorageWrapper.getItem('user');
console.log(storedData); // 如果数据未过期,则输出userData对象;否则输出null const storedData1 = SessionStorageWrapper.getItem('user',1); // 数据过期,则移除旧数据;
console.log(storedData1);

具备有效期的sessionStorage存储的更多相关文章

  1. 【转】本地存储-localStroage/sessionStorage存储

    原文地址:[js学习笔记-103]----本地存储-localStroage/sessionStorage存储 客户端存储 l  WEB存储 web存储最初作为html5的一部分被定义成API形式,但 ...

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

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

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

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

  4. sessionStorage存储json对象

    应用场景: 账单列表中A页面:点击其中的一列,ajax返回的数据在这一页 点击进入账单详情B页面: 因为在A页面已经做过ajax的请求了,所以希望把当前其中的一个数组对象传到B页面中,所以,就考虑到暂 ...

  5. 在 sessionStorage存储json对象

    目的:A页面存的东西要从B页面拿到 因为sessionStorage.setItem("key","value")内存储的都是字符串,所以,如果以对象的形式存到 ...

  6. 深入了解浏览器存储:对比Cookie、LocalStorage、sessionStorage与IndexedDB

    摘要: 对比Cookie.LocalStorage.sessionStorage与IndexedDB 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 随着移动网络的发展与演化,我 ...

  7. localStorage、sessionStorage、cookie的有效期和作用域问题

    sessionStorage,localStorage,cookie都可以实现客户端存储,三者的区别有哪些了? cookie作为最早期的被设计web浏览器存储少量数据,从底层看,它是作为http协议的 ...

  8. 浅谈浏览器存储(cookie、localStorage、sessionStorage)

    今天我们从前端的角度了解一下浏览器存储,我们常见且常用的存储方式主要由两种:cookie.webStorage(localStorage和sessionStorage).下面我们来一一认识它们. Co ...

  9. 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题

    移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...

  10. H5笔记——locaStorage和sessionStorage本地存储的一些坑

    当使用window.localStorage或者window.sessionStorage 存储json数据时需要将json数据用JSON.stringify(data)转换成json字符串再存储在本 ...

随机推荐

  1. [转帖]Jmeter正则提取器常用的几种方式

    https://www.cnblogs.com/a00ium/p/10483741.html 使用jmeter的同学都知道,jmeter提供了各种各样的提取器,如jsonpath.Beanshell. ...

  2. 【转帖】淫技巧 | 如何查看已连接的wifi密码

    主题使用方法:https://github.com/xitu/juejin-markdown-themes theme: juejin highlight: github 一.引言 在实际工作中,常常 ...

  3. Inspur CS5280H BMC重装系统的过程

    Inspur CS5280H BMC重装系统的过程 背景 公司里面一台信创海光的设备 默认安装了银河麒麟v10的操作系统 但是在进行瀚高数据库压测时 总会出现无缘无故的宕机的情况. 昨天还特别学习了下 ...

  4. 日常测试进行beans比较的简单方法

    日常测试进行beans比较的简单方法 摘要 想每天把有变化的bean抓取出来有新增的beans时能够及时进行分析和介入 保证beans 都是符合规范的. 方式和方法 开启actuator 打开bean ...

  5. 解决Word等打开嵌入的文件提示 包含有害内容 无法打开的问题

    最近打开文件时提示: 从网上找了一下 最简单的解决办法是: 新建一个文件, 输入如下内容 导入注册表 每次打开时不进行 文件有效性的检查即可. 为了省事 我多加了几个版本的 如果是excel  将 w ...

  6. ARC150D - Removing Gacha (树上期望)

    Link 题意: 给一棵 \(n\) 个节点的树,称一个点是好的,当且仅当它到根的路径上都是黑色(包括自己).每次在不好的节点中随机选一个把它涂成黑色(不管原来它是否是白的),直到所有点都是好的为止. ...

  7. cookie的设置读取

    <script> // 设置cookie值哈 let username = '我是cookie' document.cookie = "name=" + usernam ...

  8. 在K8S中,deploy升级过程包括什么?

    在Kubernetes (K8S) 中,Deployment的升级过程主要包括以下几个步骤: 更新Deployment配置: 当需要对应用程序进行升级时,通常会更新Deployment的YAML配置文 ...

  9. Json Schema高性能.net实现库 LateApexEarlySpeed.Json.Schema - 直接从code生成json schema validator

    LateApexEarlySpeed.Json.Schema - Json schema validator generation from code 除了用户手动传入标准的json schema来生 ...

  10. Spring一套全通2—工厂高级

    百知教育 - Spring系列课程 - 工厂高级特性 第十章.对象的生命周期 1. 什么是对象的生命周期 指的是一个对象创建.存活.消亡的一个完整过程 2. 为什么要学习对象的生命周期 由Spring ...