浏览器缓存总结（cookie、localStorage、sessionStorage）

cookie

般用来存储用户信息，每次请求的时候内容都会自动被传递给服务器。不同浏览器对于cookie的大小并不统一，一般都是4-10kb。Cookie可以设置时效。注意，cookie比较浪费带宽，不建议写入太多内容，这也是前端性能优化的一点

• 操作浏览器对象

  //设置
   -//设置cookie
    document.cookie = "userId=nick123" 
   -//设置过期时间
    document.cookie = "userId=nick123; expires=Wed, 15 Jan 2020 12:00:00 UTC"
   -//设置所属路径，默认当前页面路径
    document.cookie = "userId=nick123; expires=Wed, 15 Jan 2020 12:00:00 UTC; path=/user" 
   -//设置cookie域
    document.cookie = "userId=nick123; expires=Wed, 15 Jan 2020 12:00:00 UTC; path=/user; domain=mysite.com" 
  
  //读取
   -//获取所有cookie
    const cookies = document.cookie 
   -//使用正则读取指定名称的cookie
    function getCookieValue(name) {
      let result = document.cookie.match("(^|[^;]+)\\s*" + name + "\\s*=\\s*([^;]+)")
      return result ? result.pop() : ""
    } 
   -//不使用正则读取指定cookie
    function getCookieValue(name) {
      const nameString = name + "="
      const value = document.cookie.split(";").filter(item => {
        return item.includes(nameString)
      })
      if (value.length) {
        return value[0].substring(nameString.length, value[0].length)
      } else {
        return ""
      }
    }
  //修改
   -//已覆盖的方式修改
    document.cookie = "userId=new_value"
  //删除
    document.cookie = "userId=; expires=Thu, 01 Jan 1970 00:00:00 UTC;"
  

• 使用npm库

  npm i js-cookie -S
  
  import Cookies from 'js-cookie'
  //设置cookie
  Cookies.set('foo', 'bar')
  //设置过期时间
  Cookies.set('name', 'value', { expires: 7 })
  //设置所属路径
  Cookies.set('name', 'value', { expires: 7, path: '' })
  //读取
  Cookies.get('name') 
  //读取所有
  Cookies.get()
  //读取所属域下的cookie
  Cookies.get('foo', { domain: 'sub.example.com' }) 
  //删除
  Cookies.remove('name')
  

localStorage

localstorage会把内容一直存在浏览器，直到清除浏览器的缓存。注意，没有清除浏览器缓存，数据会永久存储在浏览器。Localstorage一般在5M左右

localStorage.setItem(key,value)  保存数据
localStorage.getItem(key)        获取数据
localStorage.removeItem(key)     删除数据
localStorage.clear();            删除全部数据

sessionStorage

跟localStorage一样，只不过sessionStorage的生命周期跟同源窗口有关，就是说当前同一个源下面的只要有一个窗口没关或者跳到另外的窗口，sessionStorage都会存在。sessionStorage大小也是5M左右

sessionStorage.setItem(key,value)  保存数据
sessionStorage.getItem(key)        获取数据
sessionStorage.removeItem(key)     删除数据
sessionStorage.clear();            删除全部数据

参考

https://www.jianshu.com/p/8e86bf912b0e

https://juejin.im/post/5d8c33cb5188255a12365056

https://github.com/js-cookie/js-cookie