JS存储cookie|极客笔记

JS存储cookie

什么是cookie

在Web开发中，cookie是一种存储在用户计算机上的文本文件，用于跟踪用户的会话信息、个人偏好和其他数据。当用户访问一个网站时，服务器会将cookie发送给用户的浏览器，并保存在浏览器的本地文件中。随后，当用户再次访问该网站时，浏览器会将cookie发送回服务器，从而实现跟踪和识别用户的功能。

如何使用JavaScript存储cookie

在JavaScript中，我们可以使用document.cookie来操作cookie。document.cookie是一个字符串，其中包含当前页面的所有cookie信息。我们可以通过设置document.cookie的值来添加新的cookie或修改现有的cookie。

设置cookie

要设置一个cookie，我们可以像下面这样操作：

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

在上面的示例中，我们设置了一个名为”username”的cookie，其值为”John Doe”，过期时间为”Thu, 18 Dec 2023 12:00:00 UTC”，路径为”/”。这样，用户访问网站时就会在本地保存一个名为”username”的cookie，其值为”John Doe”。

修改cookie

要修改一个已存在的cookie，我们可以先取得所有的cookie信息，然后找到要修改的cookie，并更新其值，最后将更新后的cookie信息重新设置给document.cookie。

// 获取所有cookie信息
var cookies = document.cookie.split(";");

// 遍历所有cookie，找到要修改的cookie
for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i].trim();
    if (cookie.indexOf("username") === 0) {
        // 更新cookie的值
        document.cookie = "username=Jane Smith; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";
        break;
    }
}

在上面的示例中，我们先获取所有cookie信息，然后遍历所有cookie，找到名为”username”的cookie，并将其值更新为”Jane Smith”。

删除cookie

要删除一个cookie，我们只需将其过期时间设置为一个过去的时间即可。

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

在上面的示例中，我们将名为”username”的cookie的过期时间设置为”Thu, 01 Jan 1970 00:00:00 UTC”，这样浏览器就会将该cookie从本地文件中移除。

使用示例

下面是一个简单的示例，演示如何使用JavaScript存储、修改和删除cookie：

// 设置cookie
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

// 修改cookie
var cookies = document.cookie.split(";");
for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i].trim();
    if (cookie.indexOf("username") === 0) {
        document.cookie = "username=Jane Smith; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";
        break;
    }
}

// 删除cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

在上面的示例中，我们首先设置了一个名为”username”的cookie，然后修改了该cookie的值，最后删除了该cookie。