JavaScript 中 Cookie 的获取与保存实现详解
本文详细介绍 JavaScript 中 Cookie 的获取与保存方法。通过 document.cookie 解析键值对实现读取，利用 Date 对象计算时间戳设置有效周期。结合完整代码示例，演示如何自动检测本地 Cookie 并弹出欢迎提示或请求输入用户名，适用于简单的用户状态保持场景。
Cookie 基础概念与作用
在前面的文章中，我们探讨了如何使用 Selenium 构建 Cookie 池，从而实现自动化登录和信息抓取等功能。那么，究竟什么是 Cookie？它具体发挥什么作用？在此，我们简要回顾一下相关基础知识。
Cookie 是存储在用户计算机中的一小段文本文件，通常包含加密后的用户信息、过期时间等数据。每次发起请求时，浏览器都会自动携带 Cookie。当用户再次访问网站时，本地 Cookie 会与 URL 一同发送给服务器，服务器据此判断用户状态。由于 Cookie 容量限制为 4KB，无法存储所有用户信息，因此常结合 Session 使用。服务器通过身份信息在 Session 中查询其他数据，从而保留用户操作状态。下文将演示如何设置 Session。
import requests
session = requests.Session()
headers = {
'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36'
}
// 设置 session 的全局 headers
session.headers.update(headers)
// 默认使用全局的 headers
session.get('https://passport.vip.com/')
//自定义 headers
custom_headers = { 'referer': 'https://passport.vip.com/' }
// 既有全局的 user-agent 也有自定义的 referer
session.get('https://passport.vip.com/', headers=custom_headers)在深入讲解 Cookie 的获取与保存应用之前，我们先简要了解 Cookie 在浏览器中的基本结构组成。
从图中可以看出，Cookie 主要由 Name-Value（键值对）和 Expires（失效时间/生命周期）两部分组成。
JavaScript 获取 Cookie 的方法
获取 Cookie 的方法：利用 Document 对象的 document.cookie 属性创建和读取数据。读取后，使用分号（;）将其分割为数组，再通过 for 循环遍历。当找到对应的 name 时，返回对应的值；若未找到，则返回空值。
function getCookie(cname) {
var name = cname + '=';
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
if (ca[i].indexOf(name) >= 0) {
return ca[i].split('=')[1];
}
}
return '';
}JavaScript 保存与设置 Cookie
保存和设置 Cookie 的方法：创建一个标准的中国时间对象，并通过 setTime() 方法设置 Cookie 的生命周期。其中，getTime() 将时间对象转换为格林威治时间戳（单位为毫秒），最后通过 toGMTString() 方法将时间戳转换为 GMT 标准时间格式。
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
var expires = 'expires=' + d.toGMTString();
document.cookie = cname + '=' + cvalue + ';' + expires;
}
Cookie 校验与完整应用示例
校验 Cookie 的逻辑：通过回调函数 getCookie() 和 setCookie() 添加判断条件。当检测到本地存在 Cookie 时，自动弹出欢迎提示框；否则，提示用户输入用户名并将其保存到 Cookie 中。
function checkCookie() {
var user = getCookie('username');
if (user) {
alert('欢迎 ' + user + ' 再次访问');
} else {
user = prompt('请输入你的名字:');
if (user) {
setCookie('username', user, 8);
}
}
}最后，通过 window.onload 事件，在页面加载完成后执行回调函数 checkCookie()。
window.onload = function () {
checkCookie();
};完整的代码如下：
<script>
window.onload = function () {
checkCookie();
};
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
var expires = 'expires=' + d.toGMTString();
document.cookie = cname + '=' + cvalue + ';' + expires;
}
function getCookie(cname) {
var name = cname + '=';
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
if (ca[i].indexOf(name) >= 0) {
return ca[i].split('=')[1];
}
}
return '';
}
function checkCookie() {
var user = getCookie('username');
if (user) {
alert('欢迎 ' + user + ' 再次访问');
} else {
user = prompt('请输入你的名字:');
if (user) {
setCookie('username', user, 8);
}
}
}
</script>测试演示：例如，首次登录界面后输入用户名。
可见，刚才测试输入的用户名以及 Expires 都成功添加到 cookies，用户有效的生命周期为 8天，那就是刚才函数 setCookie() 里面的第3个参数。
在不删除 Cookie 的情况下，把浏览器关掉，再重新打开时，由于系统检测到本地 Cookie 有相对应的用户名，因此会自动执行 checkCookie() 里的 alert() 函数内容，那就是弹窗语句。
总结
到此这篇关于Javascript中Cookie的获取和保存应用的文章就介绍到这了,更多相关js Cookie获取和保存内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
JS语法错误会阻止加载吗？区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践：从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组？
2026-11-05 09:59:18