javascript本地缓存方案-- 存储对象和设置过期时间

cz-storage 解决问题

1. 前端js使用localStorage的时候只能存字符串,不能存储对象

cz-storage 可以存储 object undefined number string

2. localStorage没有过期时间

cz-storage 可以设置以天为单位的过期时间

3. github地址

安装

yarn add cz-storage || npm i cz-storage
复制代码

使用

import LS from 'cz-storage'

let value = {name: 'xiejun'}
// 设值
// put (<key>, value, expiredTime)
// expiredTime 过期时间单位是天 1/8 === 3小时
LS.put('key', value, 1)

// 获取值
LS.get('key')

// 清楚所有缓存
LS.clear()

// 删除某个key
LS.remove('key')
复制代码
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
localStorage 和 sessionStorage 是 Web 存储 API 中的两种不同类型的存储方式,它们都是基于键值对的存储方式。其中 localStorage 是持久化存储,数据不会过期,除非手动清除或者用户清除浏览器缓存;而 sessionStorage 是会话存储,数据只在当前会话有效,关闭浏览器或者标签页后会被删除。 localStorage 和 sessionStorage 都没有提供直接设置过期时间的方法。但可以通过在存储时记录时间戳,然后在获取时判断是否过期来实现类似的功能。示例代码如下: ```javascript //设置localStorage localStorage.setItem('key', JSON.stringify({ value: 'value', expiredAt: new Date().getTime() + 1000 * 60 * 60 //过期时间为1小时后 })); //获取localStorage var data = JSON.parse(localStorage.getItem('key')); if (data.expiredAt < new Date().getTime()) { //过期了 localStorage.removeItem('key'); } else { //未过期 console.log(data.value); } ``` 对于 indexDB,也没有提供直接设置过期时间的方法,但可以在存储时记录过期时间戳,并在获取时进行判断和删除。示例代码如下: ```javascript //打开数据库 var request = window.indexedDB.open('myDB', 1); request.onsuccess = function(event) { var db = event.target.result; //获取对象仓库 var store = db.transaction(['myStore'], 'readwrite').objectStore('myStore'); //设置过期时间为1小时后 var expiredAt = new Date().getTime() + 1000 * 60 * 60; //存储数据 store.put({ key: 'key', value: 'value', expiredAt: expiredAt }); //获取数据 store.get('key').onsuccess = function(event) { var data = event.target.result; if (data.expiredAt < new Date().getTime()) { //过期了,删除数据 store.delete('key'); } else { //未过期 console.log(data.value); } }; }; ``` 需要注意的是,以上示例代码只是一种简单的实现方式,具体实现还需要考虑数据量、性能、数据安全等方面的问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值