localStorage封装

转载

mob6047570233c4 2021-09-24 16:25:00

const deepProxy = (obj, cb) => {
  if (typeof obj === 'object' && obj !== null) {
    for (const prop in obj) {
      console.warn(obj[prop], cb)
      if (typeof obj[prop] === 'object' && obj[prop] !== null) obj[prop] = deepProxy(obj[prop], cb)
    }
  }

  return new Proxy(obj, {
    set: function (target, p, value, receiver) {
      let newValue = value
      if (typeof newValue === 'object' && newValue !== null) {
        newValue = deepProxy(newValue, cb)
      }
      const result = Reflect.set(target, p, newValue, receiver)
      cb()
      return result
    },
    deleteProperty(target, p) {
      delete target[p]
      cb()
    }
  })
}

storage = {
  /**
   * 封装 localStorage 的 setItem，将要储存的数据转化成 JSON
   * 并返回一个深度监听对象，改变这个对象/数组的属性或索引也能同时改变 loacalStorage 储存的 JSON 数据
   * @param {string} key 要设置的 key 值
   * @param {object} val 要设置的 val 值，会转化成 JSON 再储存到本地缓存
   * @returns 返回一个深度监听的 Proxy 对象，更改这个对象将会实时改变本地存储的JSON
   * 示例代码：
   * const user = storage.setLocal('user', {
   *  userName: 'user1234',
   *  psd: 'psd1234'
   * })
   * // 这时候 localStorage 会储存 setLocal 方法的第二个对象转换成的 JSON
   * 
   * user.psd = 'psd4321' // 对 storage.setLocal 返回的对象进行操作会同时改变储存在本地缓存的 JSON
   */
  setLocal(key, val) {
    localStorage.setItem(key, JSON.stringify(val))
    return storage.getLocal(key)
  },

  /**
   * 封装的 localStorage 的 getItem，取出数据前先将 JSON 转化成 Proxy 对象
   * @param {string} key 要取出的本地缓存的 key 值
   * @returns 返回一个深度监听的 Proxy 对象，更改这个对象将会实时改变本地存储的JSON
   * 示例代码：
   * const user = storage.getLocal('user')
   * user.balance = 100 // 同时改变储存在 loaclStorage 的 JSON user 
   */
  getLocal(key) {
    let val = localStorage.getItem(key)
    val = val ? JSON.parse(val) : null
    const proxyObj = deepProxy(val, () => storage.setLocal(key, proxyObj))
    return proxyObj
  },
  
  /**
   * 如果删除 localStorage 中已储存的 JSON (如user) 的某个值(如userName)，使用：
   * delete storage.getLocal('user').userName
   * 如果删除 localStorage 的 key (如user)，使用 storage.delLocal
   * @param {string} key 要删除的缓存的 key 值
   * 示例代码：
   * storage.delLocal('user') // 删除 key 值为 'user' 的缓存
   */
  delLocal(key) {
    delete storage.getLocal(key)
    localStorage.removeItem(key)
  }
}

// 设置缓存
const user = storage.setLocal('user', {
      name: '占山',
      devices: [5, 4, 3, 2, 1],
      obj:{
         obj:{
            name:'llll'
         }
      }
})
user.name = '林',
user.devices = [5,2],
user.obj.obj.name = '奇'