sessionStorage的封装

Cookie，localStorage，sessionStorage三者区别？

• cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）
• cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递
• sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
• 存储大小：
  • cookie数据大小不能超过4k
  • sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
• 有期时间：
  • localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
  • sessionStorage 数据在当前浏览器窗口关闭后自动删除
  • cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

为什么要封装Storage，本身不是已经有API？

• Storage本身有API，但是只是简单的key、value形式

• Storage只存储字符串，需要人工转成json对象

• Storage只能一次性清空，不能单个清空

  // Storage封装
  const STORAGE_KEY = 'mall'
  
  export default {
    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))
      }
    },
    // 获取某一个模块下面的属性user下面的userName
    getItem (key, moduleName) {
      if (moduleName) {
        const val = this.getItem(moduleName)
        if (val) return val[key]
      }
      return this.getStorage()[key]
    },
    getStorage () {
      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]
      }
      window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val))
    }
  }