Js操作浏览器Cookie

Cookie的产生

Web应用程序是使用HTTP协议传输数据的，HTTP协议是无状态协议，指协议对于交互没有记忆能力，浏览器与服务器的每一次交互都是新的。
为了使WEB应用程序在页面之间共享数据和记录用户状态，最早有两个解决方案Cookie和Sesstion:

• Cookie以文本格式存储在客户端；
• Sesstion存储在服务端。

Cookie是网景公司发明的，服务器端向浏览器发送Cookie，浏览器将Cookie保存，浏览器能够获取到Cookie，之后在浏览器与服务器交互时浏览器都会将cookie发送给服务器端。

这样使浏览器与服务器交互有了记忆功能，比如常用的用户登录状态，购物车等都可以存储在客户端。

Cookie是什么

Cookie是一小段存储在浏览器端的文本信息。
Cookie像是浏览器与服务器之间的一种默契，如果把浏览器与服务器的交互看成买卖的话，Cookie很像会员卡，发卡的是服务器，用卡的是浏览器，浏览器拿到卡之后每次消费都会携带着卡片，直到卡片过期。
服务器发的卡片有两种类型，一次作废的卡，一定期限的卡。如果设置了使用期限就是一定期限的卡，没设置了使用期限就是一次作废的卡。

所有的主流浏览器如IE、Netscape、Firefox、Opera等都支持Cookie，不同的浏览器对cookie的数目和大小的限制不同。一般来说每个web服务器(域名)保存的cookie数不能超过50个，每个cookie保存的数据不能超过4KB。

在Chrome浏览器中查看Cookie

• 一个Cookie包含若干个字段，格式就是键值对
  以Chrome浏览器为例，在开发者工具的Application->Storage->Cookies查看当前域的Cookie：
  

浏览器中的Cookie主要由以下几部分组成：

• Name（名称）
  Cookie唯一的名称，必须经过URL编码处理。
• Value（值）
  Cookie值，必须经过URL编码处理。
• domain（域）
  Cookie来自哪个域名。默认情况下cookie在当前域下有效，你也可以设置该值来确保对其子域是否有效。
• path（路径）
  指定Cookie在哪些路径下有效，默认是当前路径下、/表示对整个树有效。
• Expires/Max-Age（失效时间）
• 默认情况下，浏览器会话结束时会自动删除Cookie；也可以设置一个GMT格式的日期，指定具体的删除日期；如果设置的日期为以前的日期，那么Cookie会立即删除。
• secure（安全标志）：指定之后只允许Cookie发送给https协议。指示浏览器只使用安全传输连接的服务器返回Cookie，应用在对于安全要求较高的地方，比如网上交易等。

通过document.cookie能够获取当前网站下的cookie，得到的是字符串的形式的值，它包含了
当前网站下的所有cookie，这些cookie通过一个分号+空格的形式串联起来。

Cookie的传输

Cookie会自动在web浏览器和web服务器之间传输，发送HTTP请求时，会把保存在该请求域名下的所有Cookie值发送给web服务器，服务器端脚本可以读、写存储在客户端的cookie。
浏览器在发送请求时，只会将名称与值添加到请求头的Cookie字段中，发送给服务端。

发送cookie

服务器端像客户端发送Cookie是通过HTTP响应报文实现的，在Set-Cookie中设置需要像客户端发送的cookie，cookie格式如下：

Set-Cookie: “name=value;domain=.domain.com;path=/;expires=Sat, 11 Jun 2016 11:29:42 GMT;HttpOnly;secure”

Cookie的存储

按照在客户端中的存储位置，可分为内存Cookie和硬盘Cookie。内存Cookie由浏览器维护，保存在内存中，浏览器关闭后就消失了，其存在时间是短暂的。

Cookie存储遵循“同源策略”

同一站点的不同页面之间是可以互相共享存储数据；不同站点的页面无法互相读取对方存储数据。

Cookie的有效期

采用临时存储可以让数据保存至当前窗口关闭或者浏览器退出；
采用永久存储，可以将数据永久地存储到硬盘上，永不失效。

操作浏览器Cookie

获取Cookie

设置Cookie

删除Cookie

五、网站性能优化
Cookie在服务端和浏览器的通信中，主要依靠HTTP的响应头和请求头传输的，所以Cookie会占据一定的带宽。

前面提到浏览器会为每一次HTPP请求自动携带上Cookie信息，但是对于同站内的静态资源，服务器并不需要处理其携带的Cookie，这无形中便浪费了带宽。

在最佳实践中，一般都会将静态资源部署到独立的域名上，从而可以避免无效Cookie的影响。

我们可以在浏览器上保存任何文本，而且我们还可以随时随地的去阻止它或者删除。我们同样也可以禁用或者编辑cookie，但是有一点需要注意不要使用cookie来存储一些隐私数据，以防隐私泄露

添加与覆盖： 浏览器用cookie名称来区别cookie，添加不同名称cookie会一直续在前一个cookie后，同名的cookie会覆盖值。

删除cookie： 不能直接删除cookie，但是设置过期日期为过去，浏览器会删除cookie。

中文及特殊字符支持： 使用escape（）函数编码cookie值，读取时使用unescape（）函数解码。

判断cookie是否存在： document.cookie.indexOf(NameOfCookie+“=”); //使用字符串函数indexOf

例：document.cookie=“str=”+escape(“I love ajax”);相当于document.cookie=“str=I%20love%20ajax”;