Storage（本地存储机制），vue中localStorage的封装

// storage.js
/**
 * Storage封装
 * {"user":{"userName":"jack","age":"30","sex":"1"}}
 */
const STORAGE_KEY = 'userData' // 存储的键名
export default {
  /*
   * @param {string} key - 键名:userName
   * @param {any} value - 键值:jack
   * @param {string} [moduleName] - 模块名，可选:user
   */

    // 设置值
  setItem (key, value, moduleName) {
    if (moduleName) {
      // 递归获取指定模块的当前状态
      const val = this.getItem(moduleName)
      // 更新状态
      val[key] = value
      // 再次递归存储更新后的状态
      this.setItem(moduleName, val)
    } else {
      // 获取整个存储状态
      const val = this.getStorage()
      // 更新状态
      val[key] = value
      // 将更新后的状态存储到会话存储中
      window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val))
    }
  },
    // 获取值
  getItem (key, moduleName) {
    // 如果提供了模块名称，则尝试从模块中获取值
    if (moduleName) {
      // 先获取整个模块的值,obj对象存储在val中
      const val = this.getItem(moduleName) // 递归获取对象
      // 如果模块的值存在，则尝试返回该模块中与key关联的值
      if (val) return val[key]
    }
    // 如果没有提供模块名称，或者从模块中未获取到值，则直接从存储中尝试获取与键关联的值
    return this.getStorage()[key]
  },
    // 获取所有存储的数据
    getStorage () {
      // 从sessionStorage中获取存储的数据，如果没有找到指定键名的数据，则返回一个空对象，转成json返回
      return JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || '{}')
    },
    // 清除指定的值
  clear (key, moduleName) {
    // 获取所有存储的数据
    const val = this.getStorage()  
    // 如果提供了模块名
    if (moduleName) {
      // 检查该模块是否存在
      if (!val[moduleName]) return
      // 在指定模块中删除键
      delete val[moduleName][key]
    } else {
      // 直接在顶层存储中删除键
      delete val[key]
    }  
    // 更新存储，将修改后的值放回sessionStorage
    window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val))
  }
}

// App.vue
<script>
import storage from '@/storage'
export default {
  name: 'App',
  mounted () {
    //storage.setItem('user', { name: 'admin' })
    //storage.setItem('jack', { age: '30' }, 'user')    
    //storage.setItem('sex', 2, 'user')
    storage.clear('sex', 'user')
  }
}
</script>