当前位置：首页 > 行业动态 > 正文

如何用原生JavaScript进行Cookie操作？

admin
行业动态
2025-01-18
3267

在原生JavaScript中，可以使用 document.cookie来操作cookie。设置cookie使用 document.cookie = "key=value";，获取cookie需要解析 document.cookie字符串，删除cookie可以将其过期时间设置为过去的时间点。

在Web开发中，cookie是一种用于在客户端存储少量数据的方法，原生JavaScript提供了操作cookie的接口，本文将详细介绍如何使用原生JavaScript进行cookie的操作。

如何用原生JavaScript进行Cookie操作？第1张

1. Cookie的基本概念

Cookie是一种小型文本文件，通常包含一个名称、一个值以及一些其他属性（如过期时间、路径等），当用户访问网站时，服务器可以设置cookie并将其发送到客户端浏览器；之后每次用户访问该网站时，浏览器都会自动将相关的cookie发送回服务器。

2. 创建和读取Cookie

1 创建Cookie

要创建一个cookie，可以使用document.cookie属性，语法如下：

document.cookie = "name=value";

创建一个名为username的cookie，其值为john_doe：

document.cookie = "username=john_doe";

2 读取Cookie

读取cookie稍微复杂一点，因为document.cookie返回的是所有cookie的字符串，需要通过解析这个字符串来获取特定的cookie值。

下面是一个函数，用于读取指定名称的cookie值：

function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

使用示例：

var username = getCookie("username");
console.log(username); // 输出: john_doe

3. 修改和删除Cookie

1 修改Cookie

修改cookie实际上是创建一个新的同名cookie来实现的，新的cookie会覆盖旧的cookie。

将username的值修改为jane_doe：

document.cookie = "username=jane_doe";

2 删除Cookie

删除cookie可以通过设置其过期时间为过去的时间来实现。

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

4. Cookie的属性

除了名称和值外，cookie还有其他属性，可以在创建或修改cookie时指定：

expires：设置cookie的过期时间，如果不指定，默认为会话cookie，即关闭浏览器后失效。

path：设置cookie的有效路径，默认为当前路径。

domain：设置cookie的有效域，默认为当前域。

secure：设置为true时，只有在HTTPS连接下才会发送cookie。

HttpOnly：设置为true时，JavaScript无法通过document.cookie访问cookie，只能由服务器端脚本访问。

创建一个带有过期时间和路径的cookie：

var date = new Date();
date.setTime(date.getTime() + (7*24*60*60*1000)); // 有效期为7天
var expires = "expires=" + date.toUTCString();
document.cookie = "username=john_doe;" + expires + "; path=/";

5. 表格归纳

操作	方法调用
创建Cookie	document.cookie = "name=value"
读取Cookie	getCookie("name")
修改Cookie	document.cookie = "name=new_value"
删除Cookie	document.cookie = "name=; expires=Thu, 01 Jan 1970 00:00:00 GMT"
设置属性	document.cookie = "name=value; expires=...; path=...; domain=...; secure; HttpOnly"