JavaScript cookie 怎么用

JavaScript大师 3 次阅读 2026-10-29 16:02 JavaScript

打开电脑浏览器逛淘宝，把喜欢的衣服加入购物车，关掉页面再打开，购物车的商品还在，这背后离不开一个叫 Cookie 的小技术。很多人觉得它是代码圈的“黑盒子”，其实用 JavaScript 操作它，就像给浏览器记小笔记一样简单，咱们一步步拆解怎么用。

不用记复杂定义，就把它当成浏览器存的“随身便签”。这个便签有几个特点：只能存在当前的浏览器里，换手机或换浏览器就没了；容量很小，一般最多存 4KB，大概是 2000 个汉字；每次你打开网页，浏览器都会把这个便签里的内容，悄悄发给网站服务器。

举个生活化例子：你在奶茶店办了张积分卡，店员给你盖了个“已办卡”的章，这就像给浏览器写了个 Cookie。之后每次你去这家店消费，店员扫一眼积分卡，就知道你是会员，这就是 Cookie 帮网站识别你的逻辑。

用 JS 存 Cookie 特别简单，直接给 document.cookie 赋值就行，格式要对——“键=值”，中间用等号分开，就像给便签写“项目=奶茶”。

比如你想存“你今天访问的时间”，代码是这样的：

document.cookie = "lastVisitTime=" + new Date().toLocaleTimeString();

这行代码就给浏览器存了个小记录，键是 lastVisitTime，值是现在的时间。

不过光这样还不够，很多时候你需要给便签加个“有效期”，不然关掉浏览器再打开，这个记录就没了。比如要存7天，得加个 expires 参数，后面跟日期：

`let date = new Date();

date.setDate(date.getDate() + 7); // 今天加7天，就是有效期

document.cookie = "lastVisitTime=今天喝了奶茶; expires=" + date.toUTCString();`

就像积分卡上写了有效期，过了7天，这个记录就自动作废，不会占地方。

存好的 Cookie 不是随便能拿的，得把所有存的内容拆出来，找到你要的那个键对应的值。比如要读刚才存的 lastVisitTime，代码是这样：

`javascript

function getCookie(name) {

let cookies = document.cookie.split("; "); // 把所有Cookie拆成数组

for (let i = 0; i < cookies.length; i++) {

let [key, value] = cookies[i].split("="); // 每个项拆成键和值

if (key === name) return value; // 找到对应的键就返回值

}

return null; // 没找到就返回空

}

// 调用就能拿到时间了

let myTime = getCookie("lastVisitTime");

还是用积分卡举例，店员不是直接把所有客人的卡都给你，而是你说“我要看我的积分卡”，店员才从一叠卡里找到你的，这就是读 Cookie 的逻辑——不是全读，而是精准找需要的内容。

修改 Cookie 特别简单，直接重新赋值就行，把原来的键覆盖，就像把积分卡上的“积分”数字改了：

document.cookie = "lastVisitTime=现在是下午5点; expires=" + date.toUTCString();

如果要删除 Cookie，不用真的“撕掉便签”，只要把有效期改成过去的时间就可以，相当于告诉浏览器这个记录已经过期了，自动删掉：

`let pastDate = new Date(0); // 1970年，是过去的时间

document.cookie = "lastVisitTime=; expires=" + pastDate.toUTCString();`

日常开发里，Cookie 多用于记住用户登录状态、购物车商品这些小数据，虽然它不如现代的 LocalStorage 能存更多内容，但胜在每次会自动发给服务器，是很多基础网页功能的“老搭档”。只要记住它是浏览器的“随身小笔记”，存、读、改、删都有简单的规则，用起来就没那么难了。

分类： JavaScript