WebStroage

Cookie

1. cookie简介
   cookie是一个小文本文件，用于客户端和服务器通信时保存客户端状态。
   
2. cookie弊端
   cookie在不同浏览器中数目限制不一样，IE6以下限制cookie20个，IE7以上和firefox浏览器限制50个，Safari和Chrome没有数目限制
   过多使用cookie会造成资源浪费
   安全性问题，cookie会被人截获，截获者不需破译即可利用客户端状态。(解决方法可封装其失效时间)
3. cookie的属性
   控制台输入document.cookie可查看并非HttpOnly的cookie。
   在Application中可查看cookie的全部属性，name,value,Domain,path,Expires/Max-Age,Size,HttpOnly,Secure
   其中HttpOnly设置cookie只能通过服务器修改，可防止XSS攻击
   Secure设定cookie必须在HTTPS支持的安全协议下传送

WebStorage

HTML5提供了浏览器的本地存储WebStorage，分为以下两种
localStorage,用户主动删除或封装失效时间
sessionStorage用于同一回话存储信息，关闭回话将会清除。

Cookie对比WebStorage

1. 失效时间
   cookie通过Expires/Max-Age设定失效时间
   localStoage用户手动清除或封装失效时间
   sessionStroage回话关闭时失效
2. API接口
   cookie需要自行封装
   sessionStorage已有接口
3. 服务器通信
   cookie会在浏览器和服务器之间通信
   WebStorage只会存储在本地

封装一个cookie

var cookie = {
  setCookie: function (name, value, time) {
    let data = new Data().getTime() + time
    document.cookie = name + "=" + value + ";Expires=" + data
  },
  getCookie: function (name) {
    let str = document.cookie
    let strAll = str.split(";")
    for (let i = 0; i < strAll.length; i++) {
      let strCoo = strAll[i].split("=")
      if (strCoo[0] === name) return strCoo[1]
    }
    return
  },
  getAll: function () {
    return document.cookie()
  },
  remove: function (name) {
    setCookie(name, "", -1)
  }
}