搞清楚Cookie

Zz__
1,569 阅读4分钟

什么是Cookie

当你访问一个网站后，例如淘宝网，淘宝网的服务器就会响应，给你返回页面内容，然后你就看到了淘宝的首页，除此之外，它还“偷偷，静悄悄地”给你的浏览器发送了一些数据，这些数据是不需要用户看到的。这些数据会被浏览器保存到本地，当你下一次用同一个浏览器再次访问淘宝网，这些数据也会被发送给淘宝服务器。这些数据就是Cookie。

小结： Cookie就是服务器给浏览器发给浏览器的一些数据。

Cookie放在哪儿

Cookie 存放在客户端中，有两种情况：

1.会话期Cookie:

会话期Cookie是最简单的Cookie，浏览器关闭之后它会被自动删除，也就是说它仅在会话期内有效。会话期Cookie不需要指定过期时间（Expires）或者有效期（Max-Age）。需要注意的是，有些浏览器提供了会话恢复功能，这种情况下即使关闭了浏览器，会话期Cookie也会被保留下来，就好像浏览器从来没有关闭一样。

2.持久性Cookie

硬盘Cookie: 硬盘Cookie保存在硬盘里，有一个过期时间，除非用户手工清理或到了过期时间。

Cookie的作用

Cookie 就是服务器发送给浏览器的一小段数据，那么这些数据又有什么作用呢？ 通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。

Cookie主要用于以下三个方面：

  • 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
  • 个性化设置（如用户自定义设置、主题等）
  • 浏览器行为跟踪（如跟踪分析用户行为等）

HTTP是无状态的

简单来说，每次请求都是一次全新的独立的请求，服务器不知道你的两次请求是来自同一个浏览器。例如，你在购物网站上在一个页面添加了一袋饼干到购物车，再这个网站的另一个页面添加了一瓶可乐，可是服务器并不会知道你上次做了什么，这两次添加商品的请求之间没有关联，浏览器无法知道用户最终选择了哪些商品。而使用HTTP的头部扩展，HTTP Cookies就可以解决这个问题。把Cookies添加到头部中，创建一个会话让每次请求都能共享相同的上下文信息，达成相同的状态。

HTTP本质是无状态的，使用Cookies可以创建有状态的会话。

客户端存储？

在最开始，Cookie的确是作为本地存储数据的一种方法，但注意，这是由于当时浏览器的功能限制导致的，没用其他的本地存储的方法。现在，浏览器已经有了新的API用于本地存储。并且Cookie的大小有限制，而且每次请求都会带上Cookie，这些都决定了Cookie不适用于客户端数据的存储。

如何设置Cookie

既然Cookie是由服务器向浏览器发送的，那么Cookie是怎样被设置，又是通过什么传给浏览器的呢？这就涉及到HTTP的相关知识了。

服务端设置

服务端通过设置响应头 Set-Cookie 字段设置Cookie

基础语法： Set-Cookie: <cookie名>=<cookie值>

设置了Set-Cookie的响应

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry

[页面内容]

客户端设置

在浏览器端，你可以查看和修改Cookie。

可以通过开发者工具查看Cookie，也可以直接修改。

JS 读写Cookie

读取Cookie: allCookies = document.cookie;

写入Cookie: document.cookie = newCookie;

详细的API用法: developer.mozilla.org/zh-CN/docs/…

但一般不允许客户端对Cookie进行操作，这可以在服务器端进行设置：

Set-Cookie: id=a3fWa;HttpOnly // 设置了HttpOnly , 这样JS 无法读写Cookie

禁用Cookie

客户端(浏览器)可以禁用Cookie , 这个首部可能会被完全移除，例如在浏览器的隐私设置里面设置为禁用cookie。

Cookie的域

cookie 会被发给哪些URL呢？ 这是服务端设置 Cookie 时进行设置的，通过Set-Cookie 的 Domain 和 Path 两个标识可以设置。

  1. Domain 设置

如果设置了 Domain 是 baidu.com 那么子域下也会有Cookie 即 a.baidu.com 也会有Cookie

  1. Path 设置

还可以设置 Path 指定哪些路径可以接受Cookie，子路径也会被匹配

例如设置了： Path=/JS 则 /JS/Ajax/ 路径也会有Cookie

Cookie的同源策略

这里和常规的同源策略不太一样，Cookie只关注域名是否一致。 不管使用哪个协议（HTTP/HTTPS）或端口号，浏览器都允许给定的域以及其任何子域名(sub-domains) 访问 cookie。

也就是说 A 网页的网址是http://w1.example.com/a.html，B 网页的网址是http://w2.example.com/b.html，那么只要设置相同的document.domain，两个网页就可以共享 Cookie。

设置 cookie 时，你可以使用Domain，Path，Secure，和Http-Only标记来限定其访问性。

avatar
文章
阅读
粉丝