浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)

本文涉及的产品
.cn 域名,1个 12个月
简介: 浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)

什么是 Cookie ?

Cookie 是一段不超过 4KB 的小型文本数据,由一个名称(Name)、一个值(Value)和其它几个用于控制 Cookie 有效期、安全性、使用范围的可选属性组成。

浏览器为什么需要 Cookie ?

HTTP 协议是无状态的,导致同一个客户端连续两次发送请求给服务器,服务器也识别不出这是同一个客户端发送的请求。

为了方便网站辨别用户身份,浏览器引入了 Cookie 机制,具体流程如下:


客户端发送 HTTP 请求到服务器

服务器收到 HTTP 请求时,在响应头里面添加一个 Set-Cookie 字段

浏览器收到响应后将 Cookie 信息保存到本地(不同浏览器对应各自的保存路径)

之后对该服务器每一次请求中都通过 Cookie 字段将 Cookie 信息发送给服务器。

可以参考学生和学校的关系来理解:

学生(客户端),第一次入学时,去学校(服务器)办理入学后,学校会颁发(Set-Cookie)一个学生证(Cookie 信息),之后每次学生进入学校,都需要带上这个学生证,以便学校知道你是哪一位学生。

Cookie 的属性

属性 含义
Name Cookie的名称
Value 对应名称的值
Domain Cookie的域名
Path Cookie生效的路径
Expires 过期时间,过了这个时间后Cookie失效
Max-age 生效时间,表示Cookie在多长时间后失效
HttpOnly 防止通过JavaScript访问Cookie
Secure 只在HTTPS协议的情况下才会将Cookie传到后端
SameSite 是否允许跨站请求时发送Cookie
Partitioned 第三方Cookie分区
Priority 优先级

Expires 过期时间

Cookie 的过期时间,如 Expires=Wed, 21 Oct 2015 07:28:00 GMT;

会话性 Cookie

当 Expires 的值为 Session 或未指定时,该 Cookie 是会话性 Cookie,Cookie 信息保存在客户端内存中,并在用户关闭浏览器时失效。但有些浏览器提供了会话恢复功能,这种情况下即使关闭了浏览器,会话期 Cookie 也会被保留下来。


持久性 Cookie

会话性 Cookie 之外的都是持久性 Cookie,会将 Cookie 信息保存在用户的硬盘中,直至过期或者清除 Cookie。

Max-Age 最长寿命

设置在 Cookie 失效之前需要经过的秒数(单位为秒),如 Max-Age=604800;

max-Age 属性为正数时,浏览器会将其持久化,即写到对应的 Cookie 文件中。

max-Age 属性为负数,则表示该 Cookie 是一个会话性 Cookie。

max-Age 为 0 时,会立即删除这个 Cookie。

假如 Expires 和 Max-Age 都存在,Max-Age 优先级更高。

Domain 域名

指定 Cookie 可以送达的主机名,如 Domain=baidu.com;

若没有指定,那么默认值为当前文档访问地址中的主机部分(但是不包含子域名)。

若指定了,如 Domain 是 .taobao.com,则无论是 a.taobao.com 还是 b.taobao.com 都可以使用 Cookie。

不能跨域设置 Cookie,如阿里域名下的页面不能把 Domain 设置成百度

Path 路径

指定一个 URL 路径,如 Path=/docs

当请求的资源的路径中包含这个 URL 路径 时,才可以发送 Cookie 首部。

如 /docs/Web/ 下的资源会带 Cookie 首部, /test 则不会携带 Cookie 首部。

Domain 和 Path 共同指定了 Cookie 应该发送给哪些 URL。

SameSite 限制第三方 Cookie

值为 Strict 时,完全禁止第三方 Cookie,跨站点时,任何情况下都不会发送 Cookie。


比如,当前网页有一个 GitHub 链接,用户点击跳转就不会带有 GitHub 的 Cookie,跳转过去总是未登录状态。


值为 Lax 时,导航到第三方网址的 Get 请求(链接,预加载请求,GET 表单)可以发送第三方 Cookie


值为 None 时,即关闭限制。(必须同时设置Secure属性才能生效)

之前Chrome浏览器的 SameSite 默认值为 None ,Chrome80 后SameSite 默认值是 Lax。

同源策略的「同源」判断比较严格,要求两个 URL 的协议/主机名/端口都一致。


Cookie中的「同站」判断比较宽松:只要两个 URL 的 eTLD+1 相同即可。


eTLD 表示有效顶级域名,注册于 Mozilla 维护的公共后缀列表(Public Suffix List)中,例如,.com、.co.uk、.github.io 等。


eTLD+1 则表示,有效顶级域名+二级域名,例如 taobao.com 等。


www.taobao.com 和 www.baidu.com 是跨站

www.a.taobao.com 和 www.b.taobao.com 是同站

a.github.io 和 b.github.io 是跨站

跨站和跨域的主要区别

  • 子域名不同时 属于跨域 不属于跨站,例如 a.jzplp.com与b.jzplp.com
  • 端口不同时 属于跨域 不属于跨站,例如 jzplp.com:8000与jzplp.com:9000
  • IP不同时(如果直接使用IP访问网站) 属于跨域 属于跨站

Priority 优先级

当Cookie的数量超过限制时,浏览器会清除一部分Cookie。

Priority属性(值有三种: Low, Medium, High)用来定义Cookie的优先级,低优先级的Cookie会优先被清除。

Cookie 的个数和大小限制

IE6.0 IE7.0/8.0 Opera Firefox Safari Chrome
cookie个数 每个域为20个 每个域为50个 每个域为30个 每个域为50个 没有个数限制 每个域为53个
cookie大小 4095个字节 4095个字节 4096个字节 4097个字节 4097个字节 4097个字节

JavaScript 操作 Cookie

详见 https://blog.csdn.net/weixin_41192489/article/details/116882349

Cookie 的作用

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

Cookie 的优点

1、易于使用和实现


实现cookie的使用要比任何其他Internet协议容易得多。


2、占用更少的内存


不需要任何服务器资源,并存储在用户的计算机上,因此不会给服务器带来额外的负担。


3、持久性


Cookie最强大的一个方面就是持久性。当在客户端的浏览器上设置Cookie时,它可以持续数天,数月甚至数年。这样可以轻松保存用户首选项和访问信息,并在用户每次返回站点时保持此信息可用。此外,由于Cookie存储在客户端的硬盘上,因此如果服务器崩溃,它们仍然可用。


4、 透明性


Cookie透明地工作,用户不知道需要存储的信息。


5、易于管理


大多数浏览器都可以让用户轻松清除浏览历史记录。只需转到工具,清除历史记录并选择Cookie即可。


Cookie存储在用户硬盘驱动器上的cookie.txt下的文本文件中,因为它是一个文本文件,我们可以使用任何查看器或文本编辑器来显示,编辑和删除它们。

Cookie 的缺点

隐私问题:Cookie会跟踪用户访问过的所有网站,这可能引发隐私担忧,因为第三方(如广告商或其他用户)可能能够访问这些存储的信息。

安全性问题:Cookie是以明文形式存储的,这可能会带来安全风险,因为任何人都可以打开并篡改Cookie。此外,Cookie容易被黑客入侵和修改。

难以解密:虽然可以手动加密和解密Cookie,但这个过程需要额外的时间,影响应用程序性能。

大小和数量限制:Cookie的大小(一般为4KB)和数量(一般每个站点20个)都存在限制,这可能限制了其能够存储的信息量。

目录
相关文章
|
17天前
|
监控 JavaScript 前端开发
确定使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript
【10月更文挑战第24天】选择使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript 是一个需要综合考虑多个因素的决策。需要根据脚本之间的依赖关系、页面加载性能要求、脚本的功能和重要性等因素来进行权衡。在实际应用中,需要通过测试和验证来确定最适合的加载方式,以提供更好的用户体验和页面性能。
|
13天前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
在浏览器执行js脚本的两种方式
|
11天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
14天前
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密
|
17天前
|
监控 JavaScript 前端开发
使用 `defer` 属性异步加载 JavaScript
【10月更文挑战第24天】使用 `defer` 属性异步加载 JavaScript 是一种有效的提高页面性能和用户体验的方法。通过合理设置 `defer` 属性,可以在不影响页面渲染的情况下异步加载脚本,并确保脚本的执行顺序。在实际应用中,需要根据具体情况选择合适的加载方式,并注意处理可能出现的问题,以确保页面能够正常加载和执行。
|
1月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
46 4
|
1月前
|
缓存 JavaScript 前端开发
探索Vue.js中的计算属性与侦听器
【10月更文挑战第5天】探索Vue.js中的计算属性与侦听器
22 1
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
420 1
|
30天前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
90 0
|
1月前
|
存储 JavaScript 前端开发
js中map属性
js中map属性
18 0