Web应用程序是使用HTTP协议传输完成的。HTTP协议是无状态的协议。当数据交换完毕以后,客户端与服务器端的连接就会关闭。当再次交换数据的时候需要重新建立新的连接。这就意味着服务器无法从连接上跟踪会话。
大家应该都有这样的经历,当你登录一个网站的时候会提醒你要不要记住账户和密码,这样下次来你就不用再次输入账号和密码了。这就是Cookie的作用,当我们再次访问的时候,方便服务器直接根据我们的Cookie直接来取上一次我们取过的东西(对于每一个Cookie服务器会对这个Cookie存储上一次我们拿过的数据,下一次对于同一个Cookie的时候,就直接取了)
什么是Cookie?
Cookie是由服务器端生成的,发送给User-Agent(一般是浏览器),这个时候服务器会告诉浏览器要设置一下Cookie,浏览器自动将Cookie以Key/Value(键值对)的方式保存在某个目录下的文本文件内,下次请求同一个网站时也会自动发送该Cookie给服务器,即添加在请求头部(但是前提时浏览器设置为启用Cookie)
Cookie就是一个小型文件(浏览器对Cookie的内存大小是有限制的,Cookie的大小一般是4K---用来记录一些信息)
Cookie具有保质期
Cookie即有永久的也含有临时的,每一个浏览器都含有自己的Cookie,每次请求的时候,都会根据domain来发送响应的Cookie,也可以通过设置expires 、max-age来设定保存日期,不设置的话默认是临时存储,即关闭浏览器就消失。
document.cookie='expires=时间/max-age=秒'
Cookie的安全性
Cookie在本地可以被更改文件 敏感的数据不要放在Cookie里。
如何设置 cookie?
知道了cookie的格式,cookie的属性选项,接下来我们就可以设置cookie了。首先得明确一点:cookie既可以由服务端来设置,也可以由客户端来设置。
服务端设置 cookie
不管你是请求一个资源文件(如 html/js/css/图片),还是发送一个ajax请求,服务端都会返回response。而response header中有一项叫set-cookie,是服务端专门用来设置cookie的。如下图所示,服务端返回的response header中有5个set-cookie字段,每个字段对应一个cookie(注意不能将多个cookie放在一个set-cookie字段中),set-cookie字段的值就是普通的字符串,每个cookie还设置了相关属性选项。
注意:
一个set-Cookie字段只能设置一个cookie,当你要想设置多个 cookie,需要添加同样多的set-Cookie字段。
服务端可以设置cookie 的所有选项:expires、domain、path、secure、HttpOnly
客户端设置 cookie
在网页即客户端中我们也可以通过js代码来设置cookie。如我当前打开的网址为http://dxw.st.sankuai.com/mp/,在控制台中我们执行了下面代码:
document.cookie = "name=Jonh; ";
再执行下面代码:
document.cookie="age=12; expires=Thu, 26 Feb 2116 11:50:25 GMT; domain=sankuai.com; path=/";
查看浏览器cookie 面板,如下图所示,新的cookie设置成功了,而且属性选项 domain、path、expires都变成了设定的值。
注意:
客户端可以设置cookie 的下列选项:expires、domain、path、secure(有条件:只有在https协议的网页中,客户端设置secure类型的 cookie 才能成功),但无法设置HttpOnly选项。
用 js 如何设置多个 cookie
当要设置多个cookie时, js 代码很自然地我们会这么写:
document.cookie = "name=Jonh; age=12; class=111";
但你会发现这样写只是添加了第一个cookie“name=John”,后面的所有cookie都没有添加成功。所以最简单的设置多个cookie的方法就在重复执行document.cookie = "key=name",如下:
document.cookie = "name=Jonh";
document.cookie = "age=12";
document.cookie = "class=111“,
如何修改、删除
修改 cookie
要想修改一个cookie,只需要重新赋值就行,旧的值会被新的值覆盖。但要注意一点,在设置新cookie时,path/domain这几个选项一定要旧cookie 保持一样。否则不会修改旧值,而是添加了一个新的 cookie。
删除 cookie
删除一个cookie 也挺简单,也是重新赋值,只要将这个新cookie的expires 选项设置为一个过去的时间点就行了。但同样要注意,path/domain/这几个选项一定要旧cookie 保持一样。