关于cookie:cookie在前端页面的使用规范

cookie 是存储在浏览器中的字符串数据，它是 HTTP 协定的一部分。

cookie 通常是由 Web 服务器应用响应头字段 Set-Cookie 设置的。而后浏览器将符合要求的 cookie 数据主动增加到申请头字段 Cookie 中。

cookie 常见的应用场景就是身份验证：

1. 登录后，服务器在响应中应用 Set-Cookie HTTP-header 来设置具备惟一“会话标识符（session identifier）“的 cookie 数据。
2. 下次当申请被发送到同一个域时，浏览器会应用 Cookie HTTP-header 通过网络发送 cookie 数据。
3. 所以服务器就会晓得用户的身份。

除此之外，在浏览器中，还能够应用 document.cookie 读取或设置 cookie 数据。

读取 cookie

document.cookie 返回蕴含页面中所有无效 cookie 的字符串（依据域、门路、过期工夫和平安设置），以分号宰割，如上面的例子所示：

name1=value1;name2=value2;name3=value3

所有名和值都是 URL 编码的，因而必须应用 decodeURIComponent() 解码。

辅助函数：

class CookieUtil {static get(name) {let cookieName = `${encodeURIComponent(name)}=`,
      cookieStart = document.cookie.indexOf(cookieName),
      cookieValue = null

    if (cookieStart > -1) {let cookieEnd = document.cookie.indexOf(';', cookieStart)
      if (cookieEnd == -1) {cookieEnd = document.cookie.length}
      cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd)
      )
    }

    return cookieValue
  }
}

设置 cookie

通过 document.cookie 属性设置新的 cookie 字符串。这个字符串在被解析后会增加到原有的 cookie 中。设置 document.cookie 不会笼罩之前存在的任何 cookie，除非设置了已有的 cookie。设置 cookie 的格局如下：

name=value; expires=expiration_time; path=domain_path; domain=domain_name; secure

// or

name=value; max-age=max_age_time; path=domain_path; domain=domain_name; secure

在所有这些参数中，只有 cookie 的 name 和 value 是必须的，且 name 和 value 必须应用 encodeURIComponent()进行编码。

可选字段

expires，max-age

默认状况下，如果一个 cookie 没有设置这两个参数中的任何一个，那么在敞开浏览器之后，该 cookie 数据就会被删除。此类的 cookie 被称为“session cookie”。

为了管制 cookie 的有效期，须要设置 expires 或 max-age。

1. expires：定义 cookie 过期的工夫，工夫采纳 GMT 格局（date.toGMTString()）。
2. max-age：定义 cookie 无效的工夫，纯数字，单位为秒。

path

path 必须是绝对路径。它使得该门路下的页面都能够拜访该 cookie。默认为以后门路。

如果一个 cookie 带有 path=/admin 设置，那么该 cookie 在 /admin 和 /admin/something 下都是可见的，然而在 /home 或 /adminpage 下不可见。

通常，咱们应该将 path 设置为根目录：path=/，以使 cookie 对此网站的所有页面可见。

tips：设置 cookie 的 path 时，能够是任意绝对路径，不受以后页面 URL 门路的影响，且都无效。

domain

cookie 无效的域。（域名不蕴含 协定 和端口）

发送到这个域的所有申请都会蕴含对应的 cookie。这个值可能蕴含子域（如 www.wrox.com），也能够不蕴含（如.wrox.com 示意对 wrox.com 的所有子域都无效）。如果不明确设置，则默认为设置 cookie 的以后页面的域。

tips：设置 cookie 的 path 时，必须合乎以后页面 URL 门路的层级关系，才无效；以后页面 URL – http://login.baidu.com，能够设置 domain 为login.baidu.com或 baidu.com，但设置domain 为www.baidu.com或 www.sina.com.cn 有效。

secure

默认状况下，cookie 是不会辨别协定的，http 协定和 https 协定都能够应用 cookie 数据。

当设置 cookie 的数据中存在 secure 标识时，则只有 https 协定能够应用该条 cookie 数据。

辅助函数

class CookieUtil {static set(name, value, expiresOrMaxAge, path, domain, secure) {let cookieText = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`

    if (expiresOrMaxAge instanceof Date) {cookieText += `; expires=${expiresOrMaxAge.toGMTString()}`
    } else if (typeof expiresOrMaxAge === 'number') {cookieText += `; max-age=${expiresOrMaxAge}`
    }

    if (path) cookieText += `; path=${path}`

    if (domain) cookieText += `; domain=${domain}`

    if (secure) cookieText += '; secure'

    document.cookie = cookieText
  }
}

删除 cookie

没有间接删除已有 cookie 的办法。为此，须要再次设置同名 cookie（包含雷同门路、域和平安选项），但要将其过期工夫设置为某个过来的工夫。CookieUtil.unset()办法实现了这些解决。这个办法接管 4 个参数：要删除 cookie 的名称、可选的门路、可选的域和可选的安全标志。

class CookieUtil {static unset(name, path, domain, secure) {CookieUtil.set(name, '', new Date(0), path, domain, secure)
  }
}

练习

入手试试看

总结

document.cookie提供了对 cookie 的拜访。

• 写入操作只会批改其中提到的 cookie。
• name/value 必须被编码。
• 一个 cookie 最大不能超过 4KB。每个域下最多容许有 20+ 个左右的 cookie（具体取决于浏览器）。

Cookie 选项：

• expires 或 max-age 设定了 cookie 过期工夫。如果没有设置，则当浏览器敞开时 cookie 就会生效。
• path=/，默认为以后门路，使 cookie 仅在该门路下可见。
• domain=site.com，默认 cookie 仅在以后域下可见。如果显式地设置了域，能够使 cookie 在子域下也可见。
• secure 使 cookie 仅在 HTTPS 下无效。

大部分场景下，cookie 存储用户的身份信息，由后端接口进行读写，前端页面很少操作 cookie 数据，但偶然也会读写 cookie。为此写一篇文章，具体记录 cookie 在浏览器的应用标准。