Cookie 管理：JavaScript 中的用户数据存储与交互指南

2024-03-18 14:58:23

Cookie：JavaScript 中的用户数据管理

简介

在网页开发中，Cookie 是一项至关重要的技术，用于存储与用户相关的少量数据。这些信息可以用于个性化用户体验、维护用户会话或跟踪用户活动。JavaScript 赋予了我们与 Cookie 进行交互的能力，让我们可以在客户端（浏览器端）灵活地控制用户体验。

如何设置 Cookie？

设置 Cookie 的过程非常简单。我们可以使用 document.cookie 属性，并指定以下参数：

名称： Cookie 的名称（key）
值： Cookie 的值
过期时间： Cookie 的过期日期（可选）
路径： Cookie 适用的页面路径（可选）
域： Cookie 所属的域（可选）
安全： 是否仅在安全连接（HTTPS）下发送 Cookie（可选）

示例：

document.cookie = "username=John Doe; expires=Thu, 20 Jul 2023 12:00:00 GMT; path=/";

如何获取 Cookie？

获取 Cookie 也同样简单。只需使用 document.cookie 属性即可。它将返回一个包含所有 Cookie 的字符串，每个 Cookie 的格式为 "key=value"。

示例：

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

如何删除 Cookie？

要删除 Cookie，只需设置其过期时间为过去的时间即可。

示例：

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

用例：实现 Cookie 选择器

一个常见的用例是使用 Cookie 来存储用户的首选项。例如，我们可以创建一个 Cookie 选择器，允许用户选择他们喜欢的 CSS 布局。

示例：

var cssSelector = document.getElementById("css");

cssSelector.addEventListener("change", function() {
  var date = new Date();
  date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 天
  document.cookie = "cssLayout=" + cssSelector.value + "; expires=" + date.toUTCString() + "; path=/";
});

window.onload = function() {
  var cookieValue = document.cookie.split('; ').find(row => row.startsWith('cssLayout=')).split('=')[1];

  if (cookieValue) {
    cssSelector.value = cookieValue;
  }
};