聊一聊Cookie那些事儿

前言

最近由于Chrome 80+对第三方cookie进行了限制，虽然没有像最新版的safari和Firefox一样默认禁止第三方cookie，但是离完全禁止第三方cookie也不远。但因此也给我们前端开发人员带来了一些影响，第三方cookie不能正常携带，造成了许多请求有问题。

cookie的用途

众所周知HTTP请求是无状态请求，简言之即是HTTP请求不知道请求是否是来自同一个客户端，对于仅是访问无需用户标识的静态资源这是没有问题，但是如果我们在天猫、或者淘宝上购买东西时，服务端无法知道请求是否来自同一个用户，这就很糟糕了。所以HTTP协议需要占用浏览器的一小块存储，存储当前访问用户的一些状态，然后每次发起HTTP请求，请求中就会携带这些状态，从而让服务器知道你是谁。cookie技术就是为了解决这个问题，让无状态的HTTP协议拥有一小块记忆。cookie是一小段数据文本，是服务端为了辨别用户身份而储存在用户本地终端上的加密数据。可分为内存cookie和硬盘cookie，内存cookie由浏览器自己维护，写在内存里，在浏览器关闭时，就消失了。对于设定了过期时间的cookie是硬盘cookie，会存储在文件内，除非用户手工清理或到了过期时间，否则cookie是一直存在的。

第三方cookie

第一方cookie就是当前访问域名一致的网址种下的cookie信息，而第三方cookie是其它站点种下的cookie，比如我们访问天猫的网站，可以看到如下的cookie信息。

我们可以看到除了天猫域名种下的cookie之外，还有需要第三方站点如taobao.com、mmstat.com种下的cookie，而这些就是第三方cookie。当然了第三方cookie的存在肯定是为了做一些事情的，比如我们前端经常做的前端异常监控，日志卖点等都需要第三方cookie的配合。

设置cookie

cookie可以通过客户端的document.cookie方法进行设置，如下是MDN提供客户端的设置cookie的方法。

var docCookies = {
   
  getItem: function (sKey) {
   
    return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[-.+*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1"