浏览器存储方案：cookie、localStorage和sessionStorage

一、三者的异同：

生命周期：

cookie：可设置失效时间，没有设置的话，默认是关闭浏览器后失效

localStorage：本地存储，提供的是一种永久性的存储方法，除非被手动清除，否则将会永久保存。

sessionStorage： 会话存储，提供的是本次会话的存储，仅在当前网页会话下有效，关闭页面或浏览器后就会被清除。

localStorage和sessionStorage的区别场景

验证一：关闭网页后重新打开，localStorage会保留，而sessionStorage会被删除；

验证二：在页面内实现跳转，localStorage会保留，sessionStorage也会保留；

验证三：在页面外实现跳转（打开新的网页），localStorage会保留，sessionStorage不会被保留

存放数据大小：

cookie：4KB左右

localStorage和sessionStorage：可以保存5MB的信息。

http请求：

cookie：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题

localStorage和sessionStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信

易用性：

cookie：需要程序员自己封装，源生的Cookie接口不友好

localStorage和sessionStorage：源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

二、应用场景：

从安全性来说，因为每次http请求都会携带cookie信息，这样无形中浪费了带宽，所以cookie应该尽可能少的使用，另外cookie还需要指定作用域，不可以跨域调用，限制比较多。但是用来识别用户登录来说，cookie还是比stprage更好用的。其他情况下，可以使用storage，就用storage。

storage在存储数据的大小上面秒杀了cookie，现在基本上很少使用cookie了，因为更大总是更好的，哈哈哈你们懂得。

localStorage和sessionStorage唯一的差别一个是永久保存在浏览器里面，一个是关闭网页就清除了信息。localStorage可以用来夸页面传递参数，sessionStorage用来保存一些临时的数据，防止用户刷新页面之后丢失了一些参数。

三、Storage常见的方法和属性

四、封装Storage

在开发中，为了让我们对Storage使用更加方便，我们可以对其进行一些封装

封装思路

class HYCache {
  constructor(isLocal = true) {

  }
}

const localCache = new HYCache()
const sessionCache = new HYCache(false)

export {
  localCache,
  sessionCache
}

// 要使用次封装
import { localCatche/sessionCache } from ""

封装结果

class HYCache {
  constructor(isLocal = true) {
    this.storage = isLocal ? localStorage: sessionStorage
  }

  setItem(key, value) {
    if (value) {
      this.storage.setItem(key, JSON.stringify(value))
    }
  }

  getItem(key) {
    let value = this.storage.getItem(key)
    if (value) {
      value = JSON.parse(value)
      return value
    } 
  }

  removeItem(key) {
    this.storage.removeItem(key)
  }

  clear() {
    this.storage.clear()
  }

  key(index) {
    return this.storage.key(index)
  }

  length() {
    return this.storage.length
  }
}

const localCache = new HYCache()
const sessionCache = new HYCache(false)

export {
  localCache,
  sessionCache
}