JS Cookie怎么读写_JS Cookie读写操作与生命周期管理方法

答案:通过原生js可操作cookie实现客户端存储。使用getCookie读取指定名称的Cookie值,setCookie设置带过期时间的Cookie,deleteCookie通过设置过去时间删除Cookie,需注意路径、编码及Secure、SameSite等安全属性,适用于身份认证等需与服务器共享状态的场景。

JS Cookie怎么读写_JS Cookie读写操作与生命周期管理方法

前端开发中,使用 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 并指定有效期(单位:天):

JS Cookie怎么读写_JS Cookie读写操作与生命周期管理方法

法语写作助手

法语助手旗下的AI智能写作平台,支持语法、拼写自动纠错,一键改写、润色你的法语作文。

JS Cookie怎么读写_JS Cookie读写操作与生命周期管理方法 31

查看详情 JS Cookie怎么读写_JS 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 的生命周期由 ExpiresMax-Age 决定:

  • 不设置过期时间 → 会话 Cookie,浏览器关闭后失效。
  • 设置 expires 或 max-age → 持久化 Cookie,到时间后自动清除。
  • 可通过服务端响应头 Set-Cookie 更精确控制,如 HttpOnly、Secure 等。

常见场景建议:
– 用户登录状态:设置 7 天或 30 天过期,加 Secure 和 HttpOnly(由后端设置)。
– 临时标记(如弹窗已展示):使用会话 Cookie 即可。

基本上就这些。JS 操作 Cookie 不复杂,但要注意编码、路径和安全属性,避免遗漏关键细节。

上一篇
下一篇
text=ZqhQzanResources