JS如何操作Cookie_JavaScriptCookie读写与删除方法完整教程-js教程-PHP中文网

JS如何操作Cookie_JavaScriptCookie读写与删除方法完整教程

絕刀狂花

发布： 2025-11-06 11:01:02

原创

320人浏览过

JavaScript可通过document.cookie读写Cookie，用于存储用户状态；写入时设置键值对及过期时间、路径等参数；读取需解析字符串并解码；删除则通过设置过期时间实现；建议封装工具函数统一操作。

js如何操作cookie_javascriptcookie读写与删除方法完整教程

JavaScript 可以直接在浏览器中操作 Cookie，用于存储少量用户数据，比如登录状态、偏好设置等。虽然现在有 localStorage 和 sessionStorage 更现代的替代方案，但在需要与服务器共享状态时，Cookie 依然是重要手段。下面详细介绍 JS 如何读取、写入和删除 Cookie。

写入 Cookie

使用 document.cookie 可以添加或修改 Cookie。注意：它不是普通变量，而是特殊的访问器属性，每次赋值都会新增或更新一个 Cookie。

基本语法：

document.cookie = "key=value; expires=expires_date; path=/; domain=example.com; secure; samesite=strict";

常用参数说明：

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

expires：过期时间，GMT 格式（可用 toUTCString()）；不设则为会话 Cookie，关闭浏览器即失效
max-age：以秒为单位的存活时间，比 expires 更现代
path：指定哪些路径可以访问该 Cookie，默认为当前路径
domain：指定域名，子域名可访问父域设置的 Cookie（需显式指定）
secure：仅在 HTTPS 下传输
samesite：防止 CSRF，可选 strict、lax、none

示例：设置一个7天后过期的用户偏好 Cookie

const date = new Date(); date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); const expires = "expires=" + date.toUTCString(); document.cookie = "theme=dark; " + expires + "; path=/";

读取 Cookie

document.cookie 在读取时返回所有同域 Cookie 的字符串，格式为 key1=value1; key2=value2，需要手动解析。

获取指定 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; }

使用示例：

法语写作助手

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

查看详情

const theme = getCookie("theme"); // 返回 "dark" 或 null

注意：Cookie 值可能包含特殊字符，建议用 decodeURIComponent 解码，写入时对应使用 encodeURIComponent。

删除 Cookie

没有直接删除的方法。正确做法是设置 Cookie 的 expires 为过去的时间，或 max-age=0，并确保 path 和 domain 与原设置一致。

删除示例：

function deleteCookie(name, path = '/') { document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=" + path; }

调用：

deleteCookie("theme");

如果原 Cookie 设置了 domain 或 secure，删除时也应加上相同属性，否则可能无法清除。

实用封装：Cookie 操作工具函数

将常用操作封装成一个简洁的工具：

const Cookie = { set(name, value, days = 7, path = '/') { const date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); const expires = date.toUTCString(); document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value) + '; expires=' + expires + '; path=' + path; },

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

remove(name, path = '/') { this.set(name, '', -1, path); } };

使用方式：

Cookie.set('username', 'john_doe', 30); Cookie.get('username'); // "john_doe" Cookie.remove('username');

基本上就这些。掌握读、写、删三步，再注意编码和路径域的一致性，就能安全有效地用 JS 操作 Cookie。

以上就是JS如何操作Cookie_JavaScriptCookie读写与删除方法完整教程的详细内容，更多请关注php中文网其它相关文章！