JavaScript Cookie 设置、获取与删除详解及通用函数封装

Cookie 的基本概念与设置

每个 Cookie 本质上是一个名/值对（name-value pair）。在 JavaScript 中，可以通过赋值给 document.cookie 属性来创建或修改 Cookie。需要注意的是，直接赋值不会覆盖同名的旧 Cookie，而是会添加一个新的记录；若要更新某个特定 Cookie 的值，需要重新为其赋予相同的名称和新值。

基础设置语法：

document.cookie = "userId=828";

如果需要同时存储多个名/值对，可以使用分号加空格（; ）进行分隔：

document.cookie = "userId=828; userName=hulk";

注意事项：

• Cookie 的名或值中不能直接使用分号（;）、逗号（,）、等号（=）以及空格。
• 对于包含特殊字符或中文的值，建议使用 escape() 函数进行编码，避免乱码问题。例如：document.cookie = "str=" + escape("I love ajax")。
• 解码时需使用 unescape() 函数还原原始数据。

获取 Cookie 的值

由于 document.cookie 返回的是当前域名下所有 Cookie 组成的字符串（格式为 name1=value1; name2=value2），因此无法直接通过名称获取单个值，必须自行解析字符串。

解析步骤：

1. 获取字符串：使用 var strCookie = document.cookie。
2. 分割数组：使用 split("; ") 将字符串拆分为名/值对数组。
3. 遍历查找：遍历数组，再次以 = 分割找到目标名称对应的值。

代码示例：

<script type="text/javascript">
// 假设已设置两个 cookie
var strcookie = document.cookie;
var arrcookie = strcookie.split(";");
var userId;

for(var i=0; i<arrcookie.length; i++) {
    var arr = arrcookie[i].split("=");
    if("userId" == arr[0]) {
        userId = arr[1];
        break;
    }
}
console.log(userId);
</script>

Cookie 的生命周期与控制参数

默认情况下创建的 Cookie 是会话 Cookie（Session Cookie），即浏览器关闭后即消失。为了实现持久化存储或精确控制访问范围，需设置以下参数：

第1步：设置过期时间（expires）

若需长期保存用户登录状态等信息，可设置 expires 参数。其值为 GMT 格式的日期字符串。超过该时间的 Cookie 将被浏览器自动删除。

示例：设置10天后过期

<script type="text/javascript">
var date = new Date();
var expireDays = 10;
// 将当前时间戳加上10天的毫秒数
var expDate = new Date(date.getTime() + expireDays*24*60*60*1000);
document.cookie = "userId=828; userName=hulk; expires=" + expDate.toGMTString();
</script>

第2步：删除 Cookie

删除 Cookie 最简单的方法是将其过期时间设置为过去的时间。浏览器会自动移除已过期的 Cookie。

示例：

<script type="text/javascript">
var date = new Date();
// 设置为过去的时间（例如减去1秒）
date.setTime(date.getTime() - 10000);
document.cookie = "userId=828; expires=" + date.toGMTString();
</script>

第3步：指定可访问路径（path）

默认情况下，Cookie 只能在创建它的目录及其子目录下访问。通过 path 参数可以扩大或限制 Cookie 的作用范围。

• path=/shop：仅在当前网站 /shop 目录下可用。
• path=/：使 Cookie 对整个网站的所有页面均可用（推荐用于全局状态）。

第4步：指定可访问主机名（domain）

默认情况下，一个主机创建的 Cookie 不能被其他主机访问。通过 domain 参数可以实现子域名之间的共享。

示例：

// 允许 .google.com 下的所有子域名（如 www.google.com, mail.google.com）访问
document.cookie = "name=value; domain=.google.com";

通用的 Cookie 处理函数封装

考虑到原生操作较为繁琐且容易出错，在实际开发中通常封装一套工具函数来实现 Cookie 的增删改查。

1. 添加 Cookie 函数

addCookie(name, value, expireHours)

接收 Cookie 名称、值和过期小时数。若 expireHours 为 0 或不传，则不设置过期时间（会话级）。

2. 获取 Cookie 函数

getCookie(name)

根据名称返回对应的值，未找到则返回空字符串。

3. 删除 Cookie 函数

deleteCookie(name)

通过将过期时间设为过去时间来删除指定 Cookie。

完整参考代码（优化版）：

<script type="text/javascript">
// 添加 Cookie
function setCookie(name, value, days) {
    var exp = new Date();
    exp.setTime(exp.getTime() + (days||0)*24*60*60*1000); // 默认为会话级别
    document.cookie = name + "=" + escape(value) + ((days==null) ? "" : ";expires=" + exp.toGMTString());
}

// 获取 Cookie
function getCookie(name) {
    var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
    if(arr != null) return unescape(arr[2]);
    return null;
}

// 删除 Cookie
function delCookie(name) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var val = getCookie(name);
    if(val != null) document.cookie = name + "=" + val + ";expires=" + exp.toGMTString();
}

// 测试使用
setCookie("testUser", "admin", 7);
alert(getCookie("testUser"));
// delCookie("testUser");
</script>

上述封装解决了手动拼接字符串和解析逻辑的重复工作，同时也包含了基础的编码解码处理，更适合嵌入到大型项目中。

以上就是 JavaScript Cookie 设置获取删除操作方法的详细内容，更多关于 JavaScript 前端存储的资料请关注本站其它相关文章！