storage 的封装

1. 传统的方式

// 例如：
 const user = { user: 'zs', age: 19 }
 // 人工转化 json
 window.sessionStorage.setItem('user', JSON.stringify(user))
 // 当数据多的时候，会上下堆积，显得臃肿

• 封装

// 这里封装 sessionStorage
// 封装的好处，数据不会上下堆积了，都在 STORAGE_KEY 中，操作的时候不需要自己手动转 JSON 了
const STORAGE_KEY = 'mall' // 当成数据表的名字
export default {
  // 存储数据
  setItem(key, value) {
    const storage = this.getStorage()
    storage[key] = value
    return window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(storage))
  },
  // 获取数据的初始化
  getStorage() {
    return JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || '{}')
  },
  // 获取数据
  getItem(key) {
    return this.getStorage()[key]
  },
  // 删除某一项数据
  removeItem(key) {
    const storage = this.getStorage()
    delete storage[key]
    // 重新存储数据
    return window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(storage))
  },
  // 清除所有数据
  clearAll() {
    return window.sessionStorage.clear()
  }
}