0

0

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

絕刀狂花

絕刀狂花

发布时间:2025-11-06 11:01:02

|

378人浏览过

|

来源于php中文网

原创

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,可选 strictlaxnone

示例:设置一个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; }

使用示例:

Short AI
Short AI

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。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

252

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

1008

2024.03.01

if什么意思
if什么意思

if的意思是“如果”的条件。它是一个用于引导条件语句的关键词,用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章,供大家免费阅读。

839

2023.08.22

cookie
cookie

Cookie 是一种在用户计算机上存储小型文本文件的技术,用于在用户与网站进行交互时收集和存储有关用户的信息。当用户访问一个网站时,网站会将一个包含特定信息的 Cookie 文件发送到用户的浏览器,浏览器会将该 Cookie 存储在用户的计算机上。之后,当用户再次访问该网站时,浏览器会向服务器发送 Cookie,服务器可以根据 Cookie 中的信息来识别用户、跟踪用户行为等。

6495

2023.06.30

document.cookie获取不到怎么解决
document.cookie获取不到怎么解决

document.cookie获取不到的解决办法:1、浏览器的隐私设置;2、Same-origin policy;3、HTTPOnly Cookie;4、JavaScript代码错误;5、Cookie不存在或过期等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

366

2023.11.23

阻止所有cookie什么意思
阻止所有cookie什么意思

阻止所有cookie意味着在浏览器中禁止接受和存储网站发送的cookie。阻止所有cookie可能会影响许多网站的使用体验,因为许多网站使用cookie来提供个性化服务、存储用户信息或跟踪用户行为。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

441

2024.02.23

cookie与session的区别
cookie与session的区别

本专题整合了cookie与session的区别和使用方法等相关内容,阅读专题下面的文章了解更详细的内容。

97

2025.08.19

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

557

2023.09.20

Rust内存安全机制与所有权模型深度实践
Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开,深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例,分析内存安全保障原理与零成本抽象优势,并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学,掌握在高性能与安全性并重场景中的工程实践能力。

4

2026.03.05

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
JavaScript
JavaScript

共185课时 | 31.1万人学习

SQL 教程
SQL 教程

共61课时 | 4.2万人学习

C++教程
C++教程

共115课时 | 20.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号