js前端cookie详解

An HTTP cookie is a small piece of data sent from a website and stored on the user's computer by the user's web browser while the user is browsing.

        上面是维基百科对cookie的解释，简单来说cookie作用就是用来记录或跟踪用户的状态的。

cookie的使用场景

        首先举个简单的栗子，当你在百度上搜索过某些关键词之后，你再打开那些包含百度推广的网页，上面就会很有针对性的给你推广一些你曾经搜索过的商品。比如我百度过 域名注册 一类的关键词，然后打开csdn里包含百度推广的网页，就会有如下推广。

---

        那这是怎么做到呢？肯定就是通过cookie来实现的啦。上面这个广告位实际上是嵌入了百度的一个iframe，当打开这个页面的时候，会向百度的服务器发送一个请求，这个请求header里面的cookie字段就包含了我曾经百度过的一些关键词（当然肯定不是直接是中文了，而是一些处理过的一长串只有它自己才认识的识别码）

---

        这边开始划重点了 cookie总是会在同源的网络请求中携带，不管需不需要。

         只要设置了某个域名下的cookie，下次再向这个域名发送请求的时候，浏览器会自动从所有cookie里找到属于这个域名符合条件的cookie，塞到request header的cookie字段里发送过去。其实使用cookie有利有弊，比如当你悄悄地百度了一些不可描述的东西之后，再打开某些网页会跳出来相关推广，如果这时旁边还有人，这就很尴尬了，有木有；感觉隐私都被暴露了，有木有。幸好我们的浏览器可以禁用cookie，当禁用了cookie之后，百度的这种定向推广就不存在了，瞬间感觉神清气爽。不过这也会带来一个副作用，就是百度登陆不上，它会提示你先打开cookie，再登陆。what？这就说到了cookie最常用的一个场景了，保存记录用户的登陆状态。 

    当我们输入用户名和密码点击登陆的时候，请求的返回的response header里会有set-cookie这么一个东西，它是用来干嘛的呢？看名字就知道了。。。设置cookie的。下面又要开始划重点了，设置cookie有两种方式，一种是通过前端js代码（document.cookie...）手动设置; 另一种就是浏览器会根据返回头部的set-cookie字段，自动设置cookie。 

---

js操作cookie

        上面讲了cookie常用的几个使用场景，下面我们讲下如果用js代码操作cookie。顺便把其中的一些坑和大家分享下。

1.  document.cookie

        可以拿到当前域名下符合条件的cookie的字符串（见上图）。为什么一定要加个‘符合条件’呢？因为要符合同源（协议相同，域名相同，端口号相同），expires没有到过期时间，path符合当前路径，httponly不为true等条件。只有满足这些条件的cookie才能被document.cookie拿到。

2.  js添加cookie

document.cookie = “test1=1111;”

需要强调的是，一次只能添加一条cookie，写成这样document.cookie = “test1=1111;test2=2222”，是添加不了两条的。如果想添加两条必须分开写成这样

document.cookie = “test1=1111;”

document.cookie = “test2=2222;”

3. 修改cookie

修改cookie的时候一定要注意expires过期时间、 path路径、 domain域、secure安全、httpOnly这几个属性，如果不写的话，这几个属性都是使用默认值的。

4. 删除cookie

直接把cookie的过期时间改成过去的某个时间就好了，浏览器会把已过期的cookie自动删除掉的。

上面就是我对cookie的一些理解，如果有写的不对的，或者大家有什么疑问，欢迎一起探讨！