javascript的Cookie如何操作_怎样读写和删除Cookie？_网络技术

javascript的Cookie如何操作_怎样读写和删除Cookie？

发布时间 - 2025-12-31 00:00:00 点击率：次

JavaScript操作Cookie通过document.cookie实现，读取返回分号分隔字符串，写入需按name=value; expires=...格式赋值，删除需覆盖并设过期时间，且path/domain必须匹配原设置。

JavaScript 操作 Cookie 主要是通过 document.cookie 这个属性来完成的，它看起来像一个变量，但实际是**读写接口**：读取时返回当前域名下所有可用 Cookie 的字符串（用分号分隔），写入时则需按特定格式赋值才能设置或更新。

如何写入（设置）Cookie

设置 Cookie 就是给 document.cookie 赋值一个符合格式的字符串。基本结构为：

name=value; expires=GMTString; path=/; domain=.example.com; secure; HttpOnly（JS不可读）

其中只有 name=value 是必需的，其它都是可选属性。常用操作示例：

立即学习“Java免费学习笔记（深入）”；

简单设置：document.cookie = "username=john";（会话级 Cookie，关闭浏览器即失效）
带过期时间（7天后）：document.cookie = "token=abc123; expires=" + new Date(Date.now() + 7*24*60*60*1000).toUTCString();
指定路径和域名（让子路径也能访问）：document.cookie = "theme=dark; path=/; domain=.site.com";
安全标记（仅 HTTPS 传输）：document.cookie = "sessionid=xyz; secure; SameSite=Strict";

如何读取 Cookie

document.cookie 读取返回的是一个类似 "a=1; b=2; c=3" 的字符串，没有内置解析方法，需要手动处理：

用 split('; ') 拆成键值对数组
再对每个项用 split('=') 分离 key 和 value
注意空格和 URL 编码（中文或特殊字符需用 encodeURIComponent/decodeURIComponent）

常用封装函数示例：

function getCookie(name) {
  const cookies = document.cookie.split('; ');
  for (let cookie of cookies) {
    const [key, value] = cookie.split('=');
    if (key === name) return decodeURIComponent(value);
  }
  return null;
}

如何删除 Cookie

Cookie 本身不能直接“删除”，只能通过覆盖的方式让它立即过期：

把 expires 设为过去的时间（如 1970 年）

必须保证 path 和 domain 与当初设置时完全一致，否则删不掉
推荐写法：document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

注意事项和替代方案

原生 Cookie 操作繁琐、易出错，且有大小限制（单个约 4KB，总数量也有限）。现代项目中建议：

优先使用 localStorage 或 sessionStorage 存储非敏感前端数据
涉及登录态、权限等关键信息，仍应由后端设 Cookie（含 HttpOnly 和 Secure），前端只负责触发登录/登出逻辑
若必须 JS 操作 Cookie，可引入轻量库如 js-cookie 简化流程

基本上就这些。不复杂但容易忽略 path/domain 匹配和编码问题，写的时候多检查两遍就行。

# javascript # java # js # 前端 # cookie # 编码 # 浏览器 # session # 后端 # ai # 键值对

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：在不影响服务的前提下，如何对运行中的网站执行安全审计？

下一篇：如何通过Webman框架实现地理位置定位和地图展示功能？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：在不影响服务的前提下，如何对运行中的网站执行安全审计？

下一篇：如何通过Webman框架实现地理位置定位和地图展示功能？