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

個人公眾號

轉載于:https://www.cnblogs.com/net-xiejun/p/9660510.html

總結

以上是生活随笔為你收集整理的javascript本地缓存方案-- 存储对象和设置过期时间的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。