Cookie

Cookie

本文章整理自:阮一峰Cookie 参考「每日一题」简述 Cookie 是什么

什么是Cookie

Cookie 是服务器保存在浏览器的一小段文本信息。浏览器每次向服务器发出请求,就会自动附上这段信息。

Cookie的作用

  1. Cookie 主要用来分辨两个请求是否来自同一个浏览器
  2. 用来保存一些状态信息,例如:
    • 对话(session)管理:保存登录、购物车等需要记录的信息。
    • 个性化:保存用户的偏好,比如网页的字体大小、背景色等等。
    • 追踪:记录和分析用户行为

不推荐使用Cookie作为客户端存储,原因:

  1. 它的容量很小(4KB)
  2. 缺乏数据操作接口
  3. 而且会影响性能

客户端储存应该使用 Web storage APIIndexedDB

Cookie的组成

Cookie 包含以下几方面的信息:

  1. Cookie 的名字
  2. Cookie 的(真正的数据写在这里面)(1、2两点就是键值对 )
  3. 到期时间
  4. 所属域名(默认是当前域名)
  5. 生效的路径(默认是当前网址)

(3/4/5是cookie的属性)

Cookie的作用过程

举例来说:

  1. 用户访问网址www.example.com,服务器在浏览器写入一个 Cookie。这个 Cookie 就会包含www.example.com这个域名(第4点),以及根路径/(第5点)。(这意味着,这个 Cookie 对该域名的根路径和它的所有子路径都有效。如果路径设为/forums,那么这个 Cookie 只有在访问www.example.com/forums及其子路径时才有效。)
  2. 以后,浏览器一旦访问这个路径,浏览器就会附上这段 Cookie 发送给服务器

Cookies作用范围

浏览器的同源政策规定,两个网址只要域名相同端口相同,就可以共享 Cookie(参见《同源政策》一章)。注意,这里不要求协议相同。也就是说,http://example.com设置的 Cookie,可以被https://example.com读取

HTTP 协议中的Cookie

HTTP 回应:Cookie 的生成(服务器端生成cookies)

服务器如果希望在浏览器保存 Cookie,就要在 HTTP 回应的头信息里面,放置一个Set-Cookie字段.

Set-Cookie:foo=bar

上面代码会在浏览器保存一个名为foo的 Cookie,它的值为bar。 (设置的格式为:<键(名)>=<值>)

HTTP 回应可以包含多个Set-Cookie字段,即在浏览器生成多个 Cookie。下面是一个例子。

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

[page content]

除了 Cookie 的值,Set-Cookie字段还可以附加 Cookie 的属性。

一个Set-Cookie字段里面,可以同时包括多个属性,没有次序的要求。

下面是设置一个Cookie的例子:除了名与它的值,还包含Domain属性Secure属性和HttpPnly属性:

Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>; Secure; HttpOnly

除了键=值来设置cookie的名字和值之外,还可以设置属性。

  1. ExpiresMax-Age用来设置cookie持续时间
  2. DomainPath设置发送http请求时那些域名和路径需要附带这个Cookie
  3. Secure属性指定浏览器只有在加密协议 HTTPS 下才能发送
  4. HttpOnly属性指定该 Cookie 无法通过 JavaScript 脚本拿到

具体用法看这里Cookie 的属性---阮一峰

HTTP 请求:Cookie 的发送(浏览器发送Cookie)

浏览器向服务器发送 HTTP 请求时,每个请求都会带上相应的 Cookie。也就是说,把服务器早前保存在浏览器的这段信息,再发回服务器。这时要使用 HTTP 头信息的Cookie字段。

Cookie: foo=bar

上面代码会向服务器发送名为foo的 Cookie,值为bar。

Cookie字段可以包含多个 Cookie,使用分号(;)分隔。

Cookie: name=value; name2=value2; name3=value3

下面是一个Http请求的例子。

GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry

服务器收到浏览器发来的 Cookie 时,有两点是无法知道的(因为这些Cookie的属性只保存在浏览器上)。

  1. Cookie 的各种属性,比如何时过期。
  2. 哪个域名设置的 Cookie,到底是一级域名设的,还是某一个二级域名设的。

document.cookie读写当前网页的Cookie

读Cookie

读取的时候,它会返回当前网页的所有 Cookie,前提是该 Cookie 不能有HTTPOnly属性。

document.cookie // "foo=bar;baz=bar"

写Coookie

document.cookie属性是可写的,可以通过它为当前网站添加 Cookie。 等号两边不能有空格

document.cookie = 'fontSize=14';

但是,document.cookie一次只能写入一个 Cookie,而且写入并不是覆盖,而是添加。

document.cookie = 'test1=hello';
document.cookie = 'test2=world';
document.cookie
// test1=hello;test2=world

写入 Cookie 的时候,可以一起写入 Cookie 的属性。

document.cookie = "foo=bar; expires=Fri, 31 Dec 2020 23:59:59 GMT";

各个属性的写入注意点如下。

path属性必须为绝对路径,默认为当前路径。 domain属性值必须是当前发送 Cookie 的域名的一部分。比如,当前域名是example.com,就不能将其设为foo.com。该属性默认为当前的一级域名(不含二级域名)。 max-age属性的值为秒数。 expires属性的值为 UTC 格式,可以使用Date.prototype.toUTCString()进行日期格式转换。 document.cookie写入 Cookie 的例子如下。

document.cookie = 'fontSize=14; '
  + 'expires=' + someDate.toGMTString() + '; '
  + 'path=/subdirectory; '
  + 'domain=*.example.com';

Cookie 的属性一旦设置完成,就没有办法读取这些属性的值

删除一个现存 Cookie 的唯一方法,是设置它的expires属性为一个过去的日期

document.cookie = 'fontSize=;expires=Thu, 01-Jan-1970 00:00:01 GMT';

上面代码中,名为fontSize的 Cookie 的值为空,过期时间设为1970年1月1月零点,就等同于删除了这个 Cookie。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Cookie与Session、LocalStorage与Sessionstorage 对比

    SessionStorage 在用户关闭页面(准确的来说是会话(Session)结束)后就失效。其余的和localstorage一样

    代码之风
  • 以登录注册理解Cookie的作用过程

    在登录成功的一瞬间,需要后台设置一个Cookie,记录一下登陆的用户id(这里用邮箱表示,代码在上面),然后发响应给浏览器 例如在服务器端设置响应头:set-c...

    代码之风
  • Session

    类比:session相当于发会员卡,会员卡上只有卡号(sessionID)。下次去健身房的时候,只要看卡号上,就能确定你本人的去他信息。 而cookie相当于把...

    代码之风
  • 【Web技术】245-全面了解Cookie

    浏览器和服务器之间的通信少不了HTTP协议,但是因为HTTP协议是无状态的,所以服务器并不知道上一次浏览器做了什么样的操作,这样严重阻碍了交互式Web应用程序的...

    pingan8787
  • 如何在 PHP 中使用和管理 Cookie

    HTTP 协议在设计之初,为了保持简单,本身是没有状态的,也就是说,对同一个客户端浏览器而言,上一次对服务器的请求和下一次请求之间是完全独立的、互不关联的,在服...

    学院君
  • Go 语言 Web 编程系列(十六)—— 设置、读取和删除 Cookie

    介绍完了 Go 语言的 HTTP 请求和响应处理,接下来,我们来看看 Go 语言中 Cookie 技术的实现,由于 HTTP 协议本身是无状态的,所以引入了 C...

    学院君
  • 【Web技术】582- 聊聊 Cookie “火热”的 SameSite 属性

    2 月份发布的 Chrome 80 版本中默认屏蔽了第三方的 Cookie,在灰度期间,就导致了阿里系的很多应用都产生了问题,为此还专门成立了小组,推动各 BU...

    pingan8787
  • 关于Cookie的细致总结

    Cookie概述 HTTP是一种无状态的请求/响应协议,用户通过浏览器访问Web站点后,Web服务端没有可用信息来判断是哪个用户发起的请求,更加无法知道下次访问...

    JavaQ
  • 当浏览器全面禁用三方 Cookie

    苹果公司前不久对 Safari 浏览器进行一次重大更新,这次更新完全禁用了第三方 Cookie,这意味着,默认情况下,各大广告商或网站将无法对你的个人隐私进行...

    ConardLi
  • GO-会话控制

    HTTP 是无状态协议,服务器不能记录浏览器的访问状态,也就是说服务器不能区分中两次请求是否由一个客户端发出。这样的设计严重阻碍的 Web 程序的设计。如:在我...

    cwl_java

扫码关注云+社区

领取腾讯云代金券