cz-storage 能夠存儲 object undefined number stringhtml
cz-storage 能夠設置以天爲單位的過時時間前端
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) } }