支持各种数据类型浏览器缓存封装

最新推荐文章于 2024-07-30 12:27:35 发布

原创最新推荐文章于 2024-07-30 12:27:35 发布 · 325 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

8 篇文章

订阅专栏

这个博客介绍了如何使用一个JavaScript库来管理localStorage和sessionStorage，包括设置、获取、过期时间处理以及链式操作。这个库支持各种数据类型的存储，并提供了方便的API进行数据操作。

使用说明

import Storage from './storage'

// 设置存储方式（默认 localStorage）
Storage.get('session') // 修改为 sessionStorage

// 获取（支持各种类型）
Storage.get('name')

// 设置（支持各种类型, null、undefined、number、string、boolean、array、object...）
Storage.set('name', 'echo')

// 设置过期时间
Storage.set('name', 'echo', 1000) // 1s后过期

// 链式获取（支持各种类型）
Storage.getChain('user.name')

// 链式设置（支持各种类型）
Storage.setChain('user.name', 'echo')

// 链式设置过期时间
Storage.setChain('user.name', 'echo', 1000) // 1s后过期

代码

storage.js

let store = window.localStorage

export default class Storage {
  static config (type) {
    if (type === 'local') {
      store = window.localStorage
    } else if (type === 'session') {
      store = window.sessionStorage
    }
  }

  static setItem (key, value) {
    store.setItem(key, JSON.stringify(value))
  }

  static getItem (key) {
    let value = store.getItem(key)
    try {
      value = JSON.parse(value)
    } catch (err) {
      // console.error('Storage', err)
    }
    return value
  }

  static remove (key) {
    store.removeItem(key)
  }

  static get (key) {
    let value = Storage.getItem(key)
    try {
      if (Object.prototype.hasOwnProperty.call(value, 'value')) {
        const expire = value.expire
        if (expire && expire < Date.now()) {
          value = undefined
          store.removeItem(key)
        } else {
          value = value.value
        }
      }
    } catch (err) {
      // console.error('Storage', err)
    }
    return value
  }

  static set (key, value, expire) {
    const data = { value }
    if (expire && typeof expire === 'number') {
      data.expire = Date.now() + expire
    }
    Storage.setItem(key, data)
  }

  static getChain (key) {
    const keys = key.split('.')
    let value = Storage.get(keys[0])
    try {
      value = keys.slice(1).reduce((obj, key) => {
        if (!obj) throw new Error('错误')
        return obj[key]
      }, value)
    } catch (err) {
      // console.error('Storage', err)
      value = undefined
    }
    return value
  }

  static setChain (key, value, expire) {
    const keys = key.split('.')
    const length = keys.length
    if (length > 1) {
      try {
        const data = Storage.getChain(keys.slice(0, -1).join('.'))
        data[keys.slice(-1)] = value
        Storage.set(keys[0], data, expire)
      } catch (err) {
        // console.error('Storage', err)
      }
    } else {
      Storage.set(keys[0], value, expire)
    }
  }
}