浏览器cookie详解

为什么会有cookie

Web应用程序是使用HTTP协议传输数据的。HTTP协议是无状态的协议。一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话。

你可能会有这样的经历，登陆一个网站的时候会提醒你要不要记住账户和密码，这样下次来你就不用再次输入账号密码了。这就是cookie的作用，当我们再次访问的时候，方便服务器直接根据我们的cookie来直接取上一次取过的东西(对于每一个cookie服务器会对这个cookie存储上一次我们拿过的数据，下一次对于同一个cookie的时候，就直接在这里取)

什么是Cookie

Cookie是由服务器端生成，发送给User-Agent（一般是浏览器），（服务器告诉浏览器设置一下cookie），浏览器自动会将Cookie以key/value保存到某个目录下的文本文件内，下次请求同一网站时也会自动发送该Cookie给服务器，即添加在请求头部（前提是浏览器设置为启用cookie）。
Cookie就是一个小型文件（浏览器对cookie的内存大小是有限制的-------用来记录一些信息）

Cookie 的特点

Cookie 具有保质期

即有永久的也含有临时的，每个浏览器都含有自己的cookie，每次请求的时候，都会根据domain来发送相应的cookie,可通过设置expires 、max-age来设定保存日期，不设置的话默认是临时存储，即关闭浏览器就消失。

document.cookie = 'expires=时间/max-age=秒'

满足同源策略

虽然网站images.google.com与网站www.google.com同属于Google，但是域名不一样，二者同样不能互相操作彼此的Cookie。而且path也必须一样才能相互访问彼此的cookie，需要注意不同浏览器对path访问规定不一样，对于chrome，path必须为当前目录，设置为其他目录无效，只能当前页面只能访问当前目录及其以上的cookie

Cookie内存大小受限制

Cookie有个数和大小的限制，大小一般是4k

image.png

Cookie的安全性

Cookie 在本地 可以被更改文件 敏感的数据不要放在cookie里

Cookies的使用

Cookie实际上主要是web服务器开发人员设置的，前端开发人员较少使用cookie，但是也会使用，比如设置登录也页面的账号信息。
我们打开浏览器控制台，对于chrome，切换到Application,在左边的Storage下面可以看到cookie项，点开就能看到当前有哪些cookie,例如下面

image.png

可以看到每一行就是一个cookie,里面含有它的值以及它的相关信息，待会将详细介绍每一个属性的含义。先来看一下怎么设置Cookie

document.cookie='name=xiaoming;expires='+oDate

上面就简单的设置了一项Cookie,每一个属性使用';'隔开，并且一次不能设置多个Cookie,一次只能设置一个，后面的也不会覆盖前面的Cookie，只会拼接到当前Cookie的字符串后面。具体使用方法如下。

• 通过document.cookie 设置cookie

  • 格式：名字=值(document.cookie = 'age =18;max-age=1000')
  • 不会覆盖(注意设置cookie的时候。不能一次设置多条cookie只能一次设置一条cookie的信息，如果后面设置了前面的一样的字段，如果同域，同path，那么后面会覆盖前面的，否者新增一条cookie。设置到path之后，该cookie只能被该path及其以下的目录获取，比如我设置path=/web,那么当我在/这个，目录下的时候不能访问到我设置到/web的cookie，而我在/web/xxx这个目录下可以访问得到)
  • 过期时间：expires=时间/max-age=秒(不设置的话默认是临时存储)

• 读取cookie(注意一般只有当我们含有http请求的时候设置cookie才有效，不同浏览器情况也不一样，比如ie下就可以直接设置)，通过字符串分割。

• 删除cookie：已经过期(即使设置日期，保证日期小于当前日期)

参考：
https://segmentfault.com/a/1190000016248401