答案：通过原生JS可操作Cookie实现客户端存储。使用getCookie读取指定名称的Cookie值，setCookie设置带过期时间的Cookie，deleteCookie通过设置过去时间删除Cookie，需注意路径、编码及Secure、SameSite等安全属性，适用于身份认证等需与服务器共享状态的场景。
在前端开发中，使用 JavaScript 操作 Cookie 是一种常见的客户端数据存储方式。虽然现在有 localStorage 和 sessionStorage 等更现代的替代方案，但在需要与服务器共享状态（如身份认证）时，Cookie 依然不可替代。下面介绍如何用原生 JS 读写 Cookie，并管理其生命周期。
读取 Cookie
JavaScript 中没有内置的专门方法来读取指定的 Cookie，但可以通过 document.cookie 获取所有 Cookie 字符串，然后自行解析。
document.cookie 返回的是一个字符串，包含当前页面可用的所有 Cookie，格式为 “key1=value1; key2=value2″。
示例：读取指定名称的 Cookie
以下函数可用于根据名称获取 Cookie 值：
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;}
使用方式：const userId = getCookie('userId');
如果不存在该 Cookie，返回 null。
写入 Cookie
通过赋值 document.cookie 可以添加或更新 Cookie。注意：每次赋值只能设置一个 Cookie。
示例：设置带过期时间的 Cookie
以下函数可设置 Cookie 并指定有效期（单位：天）：
function setCookie(name, value, days) { const expires = new Date(); expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000); document.cookie = `${name}=${encodeURIComponent(value)};expires=${expires.toUTCString()};path=/`;}
说明：
– encodeURIComponent 防止特殊字符出错。
– expires 设置过期时间，不设置则为会话 Cookie（关闭浏览器即失效）。
– path=/ 表示整个站点都可访问该 Cookie，也可设为特定路径如 path=/admin。
高级选项：设置安全属性
若网站使用 HTTPS，建议加上 Secure 和 SameSite 属性：
document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/;Secure;SameSite=Strict`;
Secure：仅通过 HTTPS 传输。
SameSite=Strict：防止跨站请求伪造（CSRF）。
删除 Cookie
JavaScript 无法直接“删除” Cookie，但可以通过设置过期时间为过去的时间来让浏览器自动清除。
function deleteCookie(name) { document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/`;}
注意：path 必须与设置时一致，否则可能无法正确删除。
Cookie 生命周期管理
Cookie 的生命周期由 Expires 或 Max-Age 决定：
不设置过期时间 → 会话 Cookie，浏览器关闭后失效。设置 expires 或 max-age → 持久化 Cookie，到时间后自动清除。可通过服务端响应头 Set-Cookie 更精确控制，如 HttpOnly、Secure 等。
常见场景建议：
– 用户登录状态：设置 7 天或 30 天过期，加 Secure 和 HttpOnly（由后端设置）。
– 临时标记（如弹窗已展示）：使用会话 Cookie 即可。
基本上就这些。JS 操作 Cookie 不复杂，但要注意编码、路径和安全属性，避免遗漏关键细节。
以上就是JS Cookie怎么读写_JS Cookie读写操作与生命周期管理方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1535713.html
微信扫一扫 
支付宝扫一扫 
