cz-storage 解決問題

1. 前端js使用localStorage的時候只能存字串,不能儲存物件

cz-storage 可以儲存 object undefined number string

2. localStorage沒有過期時間

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