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')

源码

/**
* 使用 html5 提供的 localStorage来缓存数据
**/
const SPLIT_STR = '@'
const localStorage = window.localStorage const DATA_PROCESS_MAPPING = {
'number': {
save : data => data,
parse: data => Number.parseFloat(data)
},
'object': {
save : data => JSON.stringify(data),
parse: data => JSON.parse(data)
},
'undefined': {
save: data => data,
parse: () => undefined
},
'default': {
save : data => data,
parse: data => data
}
} function getProcess(type) {
return DATA_PROCESS_MAPPING[type] || DATA_PROCESS_MAPPING['default']
} export default {
get(key) {
let stringData = localStorage.getItem(key)
if (stringData) {
let dataArray = stringData.split('@')
let data
let now = Date.now()
if (dataArray.length > 2 && dataArray[2] < now) { // 缓存过期
localStorage.removeItem(key)
return null
} else {
let value = decodeURIComponent(dataArray[1])
data = getProcess(dataArray[0]).parse(value)
return data
}
}
return null
},
put(key, value, expired) { // expired 过期时间 单位天 默认是100 上线测试没问题替换旧的设值
const type = typeof value
const process = getProcess(type)
if (!expired) { // 默认不传 不过期
value = type + SPLIT_STR + encodeURIComponent(process.save(value))
} else {
let time = expired * 24 * 60 * 60 * 1000 + new Date().getTime()
value = type + SPLIT_STR + process.save(value) + SPLIT_STR + time
}
localStorage.setItem(key, value)
},
clear() {
localStorage.clear()
},
remove(key) {
localStorage.removeItem(key)
}
}

个人公众号

javascript本地缓存方案-- 存储对象和设置过期时间的更多相关文章

  1. 可以设置过期时间的Java缓存Map

    前言 最近项目需求需要一个类似于redis可以设置过期时间的K,V存储方式.项目前期暂时不引进redis,暂时用java内存代替. 解决方案 1. ExpiringMap 功能简介 : 1.可设置Ma ...

  2. redis 一二事 - 设置过期时间,以文件夹形式展示key显示缓存数据

    在使用redis时,有时回存在大量数据的时候,而且分类相同,ID相同 可以使用hset来设置,这样有一个大类和一个小分类和一个value组成 但是hset不能设置过期时间 过期时间只能在set上设置 ...

  3. java操作Redis缓存设置过期时间

    关于Redis的概念和应用本文就不再详解了,说一下怎么在java应用中设置过期时间. 在应用中我们会需要使用redis设置过期时间,比如单点登录中我们需要随机生成一个token作为key,将用户的信息 ...

  4. C# 给PDF文档设置过期时间

    我们可以给一些重要文档或者临时文件设置过期时间和过期信息提示来提醒读者或管理者文档的时效性,并及时对文档进行调整.更新等.下面,分享通过C#程序代码来给PDF文档设置过期时间的方法. 引入dll程序集 ...

  5. 如何为Redis中list中的项设置过期时间

    问题 两种解决方法 有序集合 多个集合以及TTL Redis是一个伟大的工具,用来在内存中存储列表是很合适的. 不过,如果你想要快速搜索列表,同时需要让列表中每项都在一定时间后过期,应该怎么做呢? 首 ...

  6. redis批量设置过期时间

    Redis 中有删除单个 Key 的指令 DEL,但好像没有批量删除 Key 的指令,不过我们可以借助 Linux 的 xargs 指令来完成这个动作.代码如下: redis-cli keys &qu ...

  7. redis文档翻译_key设置过期时间

    Available since 1.0.0.    使用開始版本号1.01 Time complexity: O(1)  时间复杂度O(1) 出处:http://blog.csdn.net/colum ...

  8. Redis原子性写入HASH结构数据并设置过期时间

    Redis中提供了原子性命令SETEX或SET来写入STRING类型数据并设置Key的过期时间: > SET key value EX NX ok > SETEX key value ok ...

  9. redis能否对set数据的每个member设置过期时间

    第一种方法,拆分成多个key,每个key设置过期时间.第二种方法改为hashMap存储,加一个过期时间的字段.可以用sorted set,把要过期的member和key的信息放在sorted set的 ...

随机推荐

  1. wget递归下载整站

    由于线上跑的系统还有CentOS5.4.6.4.6.5.6.5.6.6.6.8,而各镜像站维护的最早的版本已经是6.9,所以需要爬archive站点的rpm包来自建yum仓库. # wget -r - ...

  2. CentOS7单节点部署redis-cluster

    准备一台机器,系统版本为CentOS7.(注意本文描述的是redis-cluster,不是主从复制) 1.下载软件包 # wget http://download.redis.io/releases/ ...

  3. Java之初学异常

    异常 学习异常的笔记记录 异常 异常的概念 指的是程序在执行过程中,出现的非正常的情况,最终会导致JVM的非正常停止. 异常指的并不是语法错误,语法错了,编译不通过,不会产生字节码文件,根本不能运行. ...

  4. [Android Studio] *.jar 与 *.aar 的生成与*.aar导入项目方法(转)

    [Android][Android Studio] *.jar 与 *.aar 的生成与*.aar导入项目方法http://blog.csdn.net/qiujuer/article/details/ ...

  5. Android获取长按按键响应

    Android获取长按按键响应http://www.2cto.com/kf/201312/261719.html Android下Listview的onItemClick以及onItemLongCli ...

  6. jquery的serializeArray、param 与serializeArray 的区别与源码解析

    jQuery.param( obj, traditional ) 为url查询或者ajax 将对象或者数组转为url参数或ajax参数,是挂在jQuery对象上的静态方法,有码有真相: var myI ...

  7. Linux下vim 快捷键

    vim按d表示剪切 按dd剪切一行 vim命令:命令模式 /关键字 n继续向下查找vim的多行注释: 1.按ctrl + v进入 visual block模式 2.按上下选中要注释的行 3.按大写字母 ...

  8. Error: cannot allocate vector of size 88.1 Mb问题

    这几天训练模型运行代码的时候,老是提示我说:Error: cannot allocate vector of size 88.1 Mb,只知道分配空间不足. 下面是查资料看到的一些回答: 一.这个是R ...

  9. Bayer图像处理

    Bayer是相机内部的原始图片, 一般后缀名为.raw. 很多软件都可以查看, 比如PS.我们相机拍照下来存储在存储卡上的.jpeg或其它格式的图片, 都是从.raw格式转化过来的..raw格式 内部 ...

  10. CentOS6.5本地yum源配置

    1. 建立本地源目录及挂载临时目录 2. 挂载光盘 3. 进入/etc/yum.repos.d/目录,将 CentOS-Base.repo CentOS-Debuginfo.repo CentOS-V ...