具备有效期的sessionStorage存储
具备有效期的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存储的更多相关文章
- 【转】本地存储-localStroage/sessionStorage存储
原文地址:[js学习笔记-103]----本地存储-localStroage/sessionStorage存储 客户端存储 l WEB存储 web存储最初作为html5的一部分被定义成API形式,但 ...
- localStorage存储数组,对象,localStorage,sessionStorage存储数组对象
localStorage存储数组,对象,localStorage,sessionStorage存储数组对象 前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听, ...
- localStorage存储对象,sessionStorage存储数组对象
前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听,数据只要发生变化就能很方便的自动渲染页面.但随即出现的问题是,之前用户操作的样式都会被重置掉. 例如我勾选了几个 ...
- sessionStorage存储json对象
应用场景: 账单列表中A页面:点击其中的一列,ajax返回的数据在这一页 点击进入账单详情B页面: 因为在A页面已经做过ajax的请求了,所以希望把当前其中的一个数组对象传到B页面中,所以,就考虑到暂 ...
- 在 sessionStorage存储json对象
目的:A页面存的东西要从B页面拿到 因为sessionStorage.setItem("key","value")内存储的都是字符串,所以,如果以对象的形式存到 ...
- 深入了解浏览器存储:对比Cookie、LocalStorage、sessionStorage与IndexedDB
摘要: 对比Cookie.LocalStorage.sessionStorage与IndexedDB 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 随着移动网络的发展与演化,我 ...
- localStorage、sessionStorage、cookie的有效期和作用域问题
sessionStorage,localStorage,cookie都可以实现客户端存储,三者的区别有哪些了? cookie作为最早期的被设计web浏览器存储少量数据,从底层看,它是作为http协议的 ...
- 浅谈浏览器存储(cookie、localStorage、sessionStorage)
今天我们从前端的角度了解一下浏览器存储,我们常见且常用的存储方式主要由两种:cookie.webStorage(localStorage和sessionStorage).下面我们来一一认识它们. Co ...
- 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题
移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...
- H5笔记——locaStorage和sessionStorage本地存储的一些坑
当使用window.localStorage或者window.sessionStorage 存储json数据时需要将json数据用JSON.stringify(data)转换成json字符串再存储在本 ...
随机推荐
- 【转帖】MySQL InnoDB存储原理深入剖析与技术分析
一.MySQL记录存储: MySQL InnoDB的数据由B+树来组织,数据记录存储在B+树数据页(page)中,每个数据页16kb,数据页 包括页头.虚记录.记录堆.自由空间链表.未分配空间.slo ...
- 2024了,我不想再用AOP收集业务操作日志了 | 京东云技术团队
0.背景 在近期的项目中,系统涉及到针对系统的业务操作日志统计功能,由于本系统位于业务链路的中心环节,负责接收上游系统的数据,并将基于用户操作产生的数据传递至下游系统,鉴于业务链路的复杂性和操作场景的 ...
- Go 循环之for循环,仅此一种
Go 循环之for循环,仅此一种 目录 Go 循环之for循环,仅此一种 一.for 循环介绍 二.for 循环结构 2.1 基本语法结构 2.2 省略初始值 2.3 省略初始语句和结束语句 2.4 ...
- 使用TimeSpan 日期与时间拼接
TimeSpan 含有以下四个构造函数: TimeSpan(Int64)将 TimeSpan结构的新实例初始化为指定的刻度数. (DateTime.Tick:是计算机的一个计时周期,单位是一百纳秒,即 ...
- 【一】飞桨paddle【GPU、CPU】安装以及环境配置+python入门教学
相关文章: [一]飞桨paddle[GPU.CPU]安装以及环境配置+python入门教学 [二]-Parl基础命令 [三]-Notebook.&pdb.ipdb 调试 [四]-强化学习入门简 ...
- C++ Qt开发:数据库与TableView多组件联动
Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍TableVi ...
- MySQL 之基础命令(精简笔记)
MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品.MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL是最好的 RD ...
- 从嘉手札<2023-12-15>
荒原 朔方 2023.12.15 人生实属是很愁的时间 愁到听不见一点雪花飘落的声音 愁到连随便写点文章都算得上拼尽全力 萧瑟的北风吹散了为数不多的倔强 漫天的雪花飞舞 埋葬的是那么多年走过的春秋 ...
- 予力八六三软件应用现代化,提升DevSecOps效能,探索交付之路
本文分享自华为云社区<予力八六三软件应用现代化,提升DevSecOps效能,探索全球交付之路>,作者: HuaweiCloudDeveloper. 来源:<华为云DTSE>期刊 ...
- .net 工具箱不可用/怎样初始化vs环境 解决方案
在开始菜单里面执行的.开始菜单->Microsoft Visual Studio 2005->Visual Studio Tools->Visual Studio 2005 命令提示 ...