学习记录之cookie

网络传输遵循HTTP协议或者https协议，而他们是无状态协议，所以使用cookie来保存浏览器打开某网页到关闭浏览器的过程中的行为和信息。

cookie（会话跟踪技术）

1.在浏览器打开一个网站到关闭浏览器的过程中跟踪记录客户端的状态 列如：登录信息；下载；点赞；播放进度等

2.特点：

• 具有时效性
  • 就在会话期间有效
  • 解决办法：手动设置时效（设置expires的值）
• 只能存文本（在代码中解析为字符串）
• 单条大小在4kb左右
• 有数量限制（一般为50）
• 读取受域名限制
• 路径限制
  • 外层cookie可以被内层访问
  • 外层不可访问内层

3.存取中文时应该进行编码和解码

4.封装存取cookie的函数

  /**
     * 封装获取cookie的函数
     * @param key {string}你要获取的值的名称
     * @return {string}获取的到的相应名称的值
     */
    function getcookie(key) {
      //获取所有的cookie值,用'; '将每个值分开。(字符串转数组)
      let arr = document.cookie.split('; ')
      //遍历数组并且用等号分开每一次的item，将分开的两边的值给一个新的对象
      let obj = new Object()
      arr.forEach(function (item, index, arr) {
        let s = item.split('=')
        //如果是中文需要解码
        obj[s[0]] = decodeURIComponent(s[1]);
      })
      return obj[key]
    },

    /**
     * 封装设置cookie的函数
     * @param  {string} name 设置的值的名称
     * @param  {string} value 需要设置的值
     * @param  {Object} option 可选值，cookie的其他属性参数如：{Path:'\',expires:1}
     * 思路：先判断有没有cookie，有的话拿出来，放进数组里面。然后把我们要加的数据拼成字符串也放进去，再吧数组放进cookie
     */
    setcookie(name, value, option) {
      let str = `${name}=${encodeURIComponent(value)}`
      if (option) {
        if (option.Path) {
          str += `; Path=${option.Path}`
        }
        if (option.expires) {
          let date = new Date
          date.setDate(date.getDate() + option.expires)
          str += `; expires=${date.toUTCString()}`
        }
      }
      document.cookie = str
    }