javascript 程序如何实现 cookie 操作

在JavaScript中，操作Cookie主要涉及到的是创建、读取、修改、和删除Cookie。JavaScript通过document.cookie属性能够轻松管理网站的Cookie。具体操作方法主要包括：使用字符串进行赋值以创建或更新Cookie、利用document.cookie读取Cookie、对Cookie字符串进行解析以获取特定的Cookie值，以及设置Cookie的expires属性为过去的时间来删除Cookie。接下来，我们将重点讲解如何使用字符串进行赋值以创建或更新Cookie。

一、创建或更新COOKIE

通过简单的字符串赋值，JavaScript允许您创建新的Cookie或更新现有的Cookie。这涉及到给document.cookie属性赋值一个字符串，该字符串符合特定的格式：“key=value; expires=date; path=domAIn; secure”。其中，除了键值对“key=value”是必需的，其他如expires（过期时间）、path（有效路径）、domain（有效域名）以及secure（安全标志）等属性都是可选的。

创建Cookie

创建Cookie最基础的格式是document.cookie = "username=John Doe"。这里，我们创建了一个名为username的Cookie，其值为John Doe。没有指定过期时间的Cookie被视为会话Cookie，这意味着它们会在浏览器关闭时自动删除。

设置过期时间

要使Cookie在特定时间后过期，可以使用expires属性：

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

在这个例子中，username这个Cookie将会在2023年12月18日12:00 UTC过期。当过期时间到达后，浏览器会自动删除这个Cookie。

二、读取COOKIE

读取Cookie涉及到解析document.cookie字符串。这个字符串包含了当前域下所有可访问的Cookie，它们通过分号和额外的空格分隔。

var cookies = document.cookie;

由于document.cookie的值是一个由分号隔开的字符串，所以要获取特定Cookie的值，你需要解析这个字符串。下面的函数展示了如何获取指定名字的Cookie的值：

function getCookie(name) {

    let cookieArray = document.cookie.split(';');
    for(let i = 0; i < cookieArray.length; i++) {
        let cookiePair = cookieArray[i].split('=');
        if(name == cookiePair[0].trim()) {
            return decodeURIComponent(cookiePair[1]);
        }
    }
    return null;
}

三、修改COOKIE

修改Cookie并不需要特殊的函数或方法。您只需再次使用document.cookie属性赋以新值即可。重要的是要确保使用相同的Cookie名，这样赋值操作就会更新该Cookie的值而不是创建一个新的Cookie。

四、删除COOKIE

要删除Cookie，需要通过将其过期日期设置为过去的某个时间来实现。由于没有直接的方法来完全删除一个Cookie，所以这是实现该目的的常用技巧。

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

在这个例子中，username这个Cookie将被删除，因为我们将它的过期时间设置为了一个过去的日期。

通过上述方法，您可以在JavaScript中有效地管理网站的Cookie，无论是创建、读取、修改还是删除它们。正确地使用Cookie可以极大地改善用户的网站体验，例如通过记住用户的登录状态或者存储用户偏好设置等。

相关问答FAQs：

1. 如何在 JavaScript 程序中创建一个 cookie？
   在 JavaScript 中，可以通过 document.cookie 属性来创建一个 cookie。例如，你可以使用以下代码来创建一个名为 "username" 的 cookie：

document.cookie = "username=John Doe";

这将在用户的浏览器中创建一个名为 "username" 的 cookie，其值为 "John Doe"。

2. 如何在 JavaScript 程序中读取一个 cookie？
   要读取一个 cookie，可以使用 document.cookie 属性来获取所有 cookie 的值。例如，以下代码可以读取名为 "username" 的 cookie：

var cookieValue = document.cookie
  .split('; ')
  .find(row => row.startsWith('username='))
  .split('=')[1];
console.log(cookieValue);

这将打印出名为 "username" 的 cookie 的值。

3. 如何在 JavaScript 程序中删除一个 cookie？
   要删除一个 cookie，需要通过设置 expires 属性为过去的时间来让 cookie 过期。例如，以下代码可以删除名为 "username" 的 cookie：

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

这将使名为 "username" 的 cookie 在用户的浏览器中过期并被删除。