具备有效期的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. [转帖]PG Exporter

    http://v0.pigsty.cc/zh/docs/reference/kernel-optimize/ Exporter https://github.com/Vonng/pg_exporter ...

  2. [转帖]Linux AWK工作原理

    https://www.cnblogs.com/yeyuzhuanjia/p/13967513.html 本篇文章我们主要为大家介绍 AWK 是如何工作的. AWK 工作流程可分为三个部分:1.读输入 ...

  3. [转帖]企业nginx简单配置

    https://www.jianshu.com/p/6a3e298b31be 第五章 企业简单应用 网站访问方式 1.基于域名访问www.baidu.com 基于IP地址访问172.16.1.7配置文 ...

  4. [转帖]Native Memory Tracking 详解(4):使用 NMT 协助排查内存问题案例

    https://www.modb.pro/db/557714 从前面几篇文章,我们了解了 NMT 的基础知识以及 NMT 追踪区域分析的相关内容,本篇文章将为大家介绍一下使用 NMT 协助排查内存问题 ...

  5. [转帖] jq实现json文本对比

      原创:打码日记(微信公众号ID:codelogs),欢迎分享,转载请保留出处. 简介# 近期,为了给一个核心系统减负,组内决定将一些调用量大的查询接口迁移到另一个系统,由于接口逻辑比较复杂,为了保 ...

  6. Raid卡在Write back 与Write through 时的性能差异

    还是读姜老师的 mysql技术内核innodb存储引擎这本书里面的内容. 之前知道raid卡的设置会影响性能, 预计也是十几倍的性能差距, 但是从来没有用数据库进行过验证 书中有针对不通raid卡的设 ...

  7. OpenPower机器上面搭建RabbitMQ 以及简单进行用户配置的方法

    OpenPower机器上面搭建RabbitMQ 以及简单进行用户配置的方法 公司有一台性能比较好的power机器. 同事要求安装rabbitmq 今天尝试进行了一下处理 公司里面有网络有相应的源 性能 ...

  8. [译]深入了解现代web浏览器(三)

    本文是根据Mariko Kosaka在谷歌开发者网站上的系列文章https://developer.chrome.com/blog/inside-browser-part3/ 翻译而来,共有四篇,该篇 ...

  9. Vue3中readonly 和 shallowReadonly和toRaw

    1.readonly 深度只读 被readonly包裹的数据只能够读取. 是一个深度只读,不能够修改. 我们看一下面的代码. 我们想修改值,但是修改后视图无响应. 并且控制台警告目标为只读 reado ...

  10. AIX6.1系统NTP同步配置

    前言   当AIX系统的本地时间与时间服务器授出的标准时间误差大于±1000秒时.xntpd服务将无法同步时间并变得无法正常工作,请进行ntp配置前,先修改AIX系统的本地时间,尽量和时间服务器的标准 ...