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.localStorageconst 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 datalet 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 valueconst 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)}
}

个人公众号