HTML | DOM cookie 属性

概述

在 Web 应用程序中，Cookies 是在 Web 客户端和 Web 服务器之间交换的小文件。Cookie 属性用于设置、获取和管理这些 Cookies。

设置 Cookie

可以使用 JavaScript document.cookie 属性来设置 Cookies。 它返回一个字符串，其中包含所有 Cookie 的名称和其值。 要设置新的 Cookie，您可以向此字符串添加一个文本值。

document.cookie = "username=John";

在上面的示例中，我们创建了一个名为 "username" 的 Cookie，其值为 "John"。

可以通过添加另一个 Cookie 来向此字符串添加多个 Cookie，如下所示：

document.cookie = "username=John; expire=Sat, 2 May 2020 23:59:59 UTC";

在上面的示例中，我们创建了一个名为 "username" 的 Cookie，其值为 "John"，并将其到期时间设置为 2020 年 5 月 2 日 23:59:59。

获取 Cookie

可以使用 document.cookie 属性来获取所有 Cookie 的字符串列表。 您可以将其拆分成单个 Cookie。 以下代码演示了如何获取名为 "username" 的 Cookie。

var cookieList = document.cookie.split(';');
for(var i = 0; i < cookieList.length; i++) {
  var cookie = cookieList[i];
  while (cookie.charAt(0) == ' ') {
    cookie = cookie.substring(1);
  }
  if (cookie.indexOf('username=') == 0) {
    var username = cookie.substring('username='.length, cookie.length);
    break;
  }
}

更改 Cookie

您可以更改 Cookie 的值，只需再次设置 Cookie 的值。

document.cookie = "username=Jane";

在上面的代码中，我们将名为 "username" 的 Cookie 的值更改为 "Jane"。

删除 Cookie

可以通过将 Cookie 的过期时间设置为一个过去的时间来删除 Cookie。以下代码演示了如何删除名为 "username" 的 Cookie。

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

在上面的代码中，我们将名为 "username" 的 Cookie 的值设置为空字符串，并将其到期时间设置为 1970 年 1 月 1 日 00:00:01。

总结

Cookie 属性可用于设置、获取和管理 Cookies。document.cookie 可用于设置、获取和删除 Cookies。 根据需要更改 Cookie 的值和过期时间。 了解 Cookie 是如何工作的，为您的 Web 应用程序提供更好的用户体验。