当前位置：首页 > news >正文

JavaScript--Cookie

news 2025/12/20 10:45:52

什么是 Cookie？

在JavaScript中，cookie是一种小型的文本文件，它存储在用户的计算机上。通过使用cookie，网站可以向用户的浏览器发送数据，并将该数据保留在浏览器中，使网站能够在不同页面之间传递数据或存储用户偏好设置，以便在后续访问中进行读取和使用。

创建Cookie：

要创建一个cookie，可以使用document.cookie属性进行设置。document.cookie是一个字符串，其中包含当前与网站相关联的所有cookie。要创建一个名为cookieName的cookie，其值为cookieValue，可以使用以下语法：

document.cookie = "cookieName=cookieValue";

此时，cookie将被存储在浏览器中。

设置过期时间：

可以通过为cookie添加expires属性来设置cookie的过期时间。例如，如果要将cookie的过期时间设置为2023年12月31日23:59:59 UTC，可以这样写：

document.cookie = "cookieName=cookieValue; expires=Thu, 31 Dec 2023 23:59:59 UTC";

当达到过期时间时，浏览器将自动删除该cookie。

指定路径：

可以通过为cookie添加path属性来指定cookie的可访问路径。默认情况下，cookie只能在创建它的页面及其子目录中访问。如果要使cookie在整个网站范围内都可访问，可以将path设置为根目录：

document.cookie = "cookieName=cookieValue; path=/";

读取Cookie：

要读取cookie的值，可以使用document.cookie来获取当前与网站相关联的所有cookie。通常，cookie值将存储在一个字符串中。为了提取特定cookie的值，可以使用正则表达式或其他字符串处理方法。下面是一个示例，展示如何获取名为cookieName的cookie值：

var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)cookieName\s*\=\s*([^;]*).*$)|^.*$/, "$1");

这将从document.cookie字符串中提取名为cookieName的cookie的值，并将其存储在变量cookieValue中。

删除Cookie：

要删除cookie，可以通过将过期时间设置为过去的时间来使其过期，从而让浏览器自动删除cookie。例如，要删除名为cookieName的cookie，可以执行以下操作：

document.cookie = "cookieName=; expires=Thu, 01 Jan 1970 00:00:00 UTC";

这将将cookie的过期时间设置为过去的时间，使其立即过期并被删除。

注意:

需要注意的是，JavaScript Cookie有一些限制。浏览器对cookie的数量和大小都有限制。此外，由于安全原因，浏览器还实施了跨域设置，限制网站在不同域之间访问cookie。更复杂的操作和cookie设置可以使用第三方库来简化处理，例如js-cookie等。

示例代码:

<!DOCTYPE html>
<html>
<head><title>Cookie操作示例页面</title>
</head>
<body><h1>Cookie操作示例页面</h1><!-- 创建Cookie按钮 --><button id="createBtn">创建Cookie</button><!-- 读取Cookie按钮 --><button id="readBtn">读取Cookie</button><!-- 修改Cookie按钮 --><button id="updateBtn">修改Cookie</button><!-- 设置Cookie过期时间按钮 --><button id="expireBtn">设置过期时间</button><!-- 删除Cookie按钮 --><button id="deleteBtn">删除Cookie</button><!-- JavaScript代码 --><script>// 创建Cookie按钮点击事件处理函数document.getElementById("createBtn").addEventListener("click", function() {document.cookie = "myCookie=Hello World";alert("已创建Cookie");});// 读取Cookie按钮点击事件处理函数document.getElementById("readBtn").addEventListener("click", function() {var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)myCookie\s*\=\s*([^;]*).*$)|^.*$/, "$1");alert("Cookie的值为：" + cookieValue);});// 修改Cookie按钮点击事件处理函数document.getElementById("updateBtn").addEventListener("click", function() {document.cookie = "myCookie=How are you?";alert("已修改Cookie");});// 设置Cookie过期时间按钮点击事件处理函数document.getElementById("expireBtn").addEventListener("click", function() {var expirationDate = new Date();expirationDate.setFullYear(2023);expirationDate.setMonth(11); // 月份从0开始，11代表12月expirationDate.setDate(31);document.cookie = "myCookie=How are you?; expires=" + expirationDate.toUTCString();alert("已设置Cookie过期时间为2023年12月31日");});// 删除Cookie按钮点击事件处理函数document.getElementById("deleteBtn").addEventListener("click", function() {document.cookie = "myCookie=; expires=Thu, 01 Jan 1970 00:00:00 UTC";alert("已删除Cookie");});</script>
</body>
</html>

以上是一个包含创建、读取、修改、设置过期时间和删除Cookie的示例HTML页面。每个按钮都有一个唯一的id，并通过JavaScript代码绑定了对应的点击事件处理函数。点击不同的按钮会执行相应的操作，并弹出提示框显示相关信息。

JavaScript--Cookie

什么是 Cookie？

创建Cookie：

设置过期时间：

指定路径：

读取Cookie：

删除Cookie：

注意:

示例代码:

相关文章：

JavaScript--Cookie

【单片机】晨启科技，酷黑版，简易电压采集装置

任务12、Quality指令加持,Midjourney生成电影级数码作品

第4章字符串和格式化输入/输出

嵌入式开发学习（STC51-7-矩阵按键）

WMS仓储管理系统的价值从哪些方面体现

网站推荐第二期-沉浸式网页翻译

【独立后台】快递小程序便宜寄快递系统小程序对接易达

【JVM】垃圾回收 ——自问自答2

MySQL数据库数据类型

【力扣】27. 移除元素＜快慢指针、首尾指针＞

【每日一题】—— C. Challenging Cliffs（Codeforces Round 726 (Div. 2)）

想在金融界拥有一席之地吗—社科院杜兰大学金融管理硕士助你圆梦

Moonbeam与Nodle网络集成，增添物联网功能

关于docker 在ubuntu16.04 上的安装

Cmder启动加速

【windows】windows上如何使用linux命令？

Docker Compose: 集合管理Docker的工具安装

Jmeter(三) - 从入门到精通 - 测试计划（Test Plan）的元件（详解教程）

20天学会rust（一）和rust say hi

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

Mac软件卸载指南，简单易懂！

04-初识css

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

sipsak：SIP瑞士军刀！全参数详细教程！Kali Linux教程！

HarmonyOS运动开发：如何用mpchart绘制运动配速图表

R语言速释制剂QBD解决方案之三

关于easyexcel动态下拉选问题处理

华为OD最新机试真题-数组组成的最小数字-OD统一考试（B卷）

区块链技术概述