本文深入解析 JavaScript 中 Cookie 的基本概念、核心属性及实际应用。详细讲解了 expires 与 max-age 的区别、path 与 domain 的作用范围，以及 source 属性对传输安全的影响。同时演示了如何通过 encodeURIComponent 处理特殊字符，并提供了创建持久化 Cookie 的代码示例，帮助开发者合理管理客户端数据存储。
JavaScript Cookie 详解
Cookie 基本介绍
一、Cookie 基本介绍
Cookie 是 document 对象的一个属性。它允许 JavaScript 代码在用户的硬盘上持久存储数据，并能读取这些以这种方式保存的数据。此外，Cookie 还可用于客户端脚本化的场景。
Cookie 数据能够在 Web 浏览器与 Web 服务器之间自动传递。
在浏览器中，可以通过 navigator.cookieEnabled 属性来检查浏览器的 Cookie 功能是否已启用。
Cookie 的基本属性
二、Cookie 的基本属性
每个 Cookie 包含四个可选属性。
1. expires
该属性指定了 Cookie 的生存期。将 expires 设置为未来的某个时间点，即可使 Cookie 在该时间过后失效。
目前推荐使用 max-age 属性来替代 expires，max-age 以秒为单位设置 Cookie 的生命周期。一旦超过 max-age 指定的时间，浏览器会自动从 Cookie 文件中删除该 Cookie。
2. path
该属性指定了与 Cookie 关联的网页路径。默认情况下，Cookie 会与创建它的网页、同一目录下的网页以及该目录子目录下的网页关联。
此属性主要决定了 Cookie 对网页的可见性。例如，若将 path 设置为 www.a.com/list，则 www.a.com/list/a.html 和 www.a.com/list/b.html 可以访问该 Cookie，但 www.a.com/contain 无法访问。反之，若将 path 设置为 www.a.com/，则 www.a.com/list 和 www.a.com/contain 均可访问该 Cookie。
3. domain
默认情况下，只有来自同一 Web 服务器的页面才能访问 Cookie，但可以设置 domain 属性。例如，若将 Cookie 的 path 设为 /，domain 设为 .example.com，则位于 catalog.example.com、orders.example.com 以及 .example.com 域名下其他服务器的所有网页都能访问此 Cookie。
注意：不能将 Cookie 的域设置为服务器所在域之外的域。
4. source
source 是一个布尔值。默认为 true，表示通过不安全的 HTTP 传输；若设为 false，则仅在浏览器与服务器通过 HTTPS 或其他安全协议连接时才传输 Cookie。
Cookie 的应用
三、Cookie 的应用
一个 Cookie 是一个字符串，由 name=value 这种结构组合而成。Cookie 示例如下：
version=1.0;max-age=3600
注意，每段字符串之间不能包含逗号或空格等字符。因此，在写入 Cookie 时需要使用 encodeURIComponent 去除变量中的相关符号，读取时则利用 decodeURIComponent 进行解码。
要创建一个能够持续存在一年的 Cookie：
document.cookie = “version=” + document.lastModified + “;max-age=” + (60*60*24*365); 总结
四、总结
尽管现在浏览器的存储技术日益丰富，HTML5 也为 localStorage 带来了更高的性能体验，但 Cookie 仍然能处理许多事务，方便小型数据的交流。合理使用 Cookie，可以让应用程序更加灵活。
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！