本文详细介绍 JavaScript 中 Cookie 的基本概念、类型及操作方法。内容涵盖持久性与会话 Cookie 的区别，以及如何通过 document.cookie 属性实现数据的写入、读取和删除。文章提供了完整的代码示例，包括设置过期时间、处理 GMT 格式日期以及浏览器存储限制等关键注意事项，帮助开发者掌握前端本地数据存储的核心技能。
JavaScript Cookie 基本概念与类型
JavaScript Cookie
Cookie 对象是一种以文件形式保存在客户端硬盘 Cookies 文件夹中的用户数据信息。该文件由所访问的 Web 站点建立，用于长久保存客户端与 Web 站点之间的会话数据，且该 Cookie 数据仅允许被所访问的 Web 站点读取。Cookie 文件的格式因浏览器而异：Netscape 浏览器使用 Cookie.txt 文件，而 Internet Explorer 则使用用户名@域名.txt 文件。
Cookie 主要分为两种类型：第一种是持久性 Cookie，它会被存储到客户端的硬盘上；第二种是会话 Cookie，它不会存储到客户端硬盘，而是存放在浏览器进程所在的内存中，一旦浏览器关闭，该会话 Cookie 即被销毁。
JavaScript 实现 Cookie 操作
使用 JavaScript 实现 Cookie 操作
写入 Cookie
代码如下:
document.cookie = " 关键字 = 值 [ ; expires = 有效日期 ] [;...]"读取 Cookie
代码如下:
document.cookie删除 Cookie
代码如下:
document.cookie = " 关键字 = ; expires = 当前日期"备注：
1.有效日期格式：Wdy,DD-Mon-YY HH:MM:SS GMT 2.Wdy / Mon：英文星期 / 月份； 3.还包含path、domain、secure属性； 4.每个Web站点(domain)可建立20个Cookie数据； 5.每个浏览器可存储300个Cookie数据，4k字节； 6.客户有权禁止Cookie数据的写入。
Cookie 操作完整实例
实例
代码如下:
<!DOCTYPE html>
<html>
<head>
<title>cookieTest.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<script type="text/javascript">
var today = new Date();
var expiredDay = new Date();
var msPerMonth = 1000 * 60 * 60 * 24 * 30;
expiredDay.setTime(today.getTime() + msPerMonth); //一个月之后过期
//写入cookie
document.cookie = "name=mengdd;expires="+expiredDay.toGMTString();
document.writeln("cookie已经写到硬盘上了");
//读取cookie
document.writeln("内容是：" + document.cookie);
document.writeln("expire day: " + expiredDay.toGMTString());
</script>
</body>
</html>