什么是cookie?js手动创建和存储cookie

关于什么是cookie的讲解：

关于"什么是cookie"的讲解：

Cookie指的是一种服务器发送给浏览器的小型文本文件，在浏览器端保存用户的登录状态、购物车信息等。在下次用户访问同样的网站时，浏览器会将存在本地的Cookie信息发送给服务器，服务器根据接收到的Cookie信息来进行相应的处理。

Cookie有以下特点：
- Cookie由服务器生成，浏览器存储。
- 每次请求时需要将Cookie发送给服务器端。
- Cookie有过期时间，可以在指定时间后自动失效或手动删除。

JS手动创建和存储Cookie的方法：

可以通过JS编写Cookie，然后将其存储至浏览器中。一下是具体实现的步骤：

1. 使用document.cookie属性来操作Cookie。document.cookie返回的是当前网站所有Cookie的键值对字符串。

2. 编写方法来创建Cookie。例如，创建一个名为foo的Cookie，值为bar，过期时间为一天后：

function createCookie(name, value, days) {
  let expires;
  if (days) {
    const date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toGMTString();
  }
  else {
    expires = "";
  }
  document.cookie = name + "=" + value + expires + "; path=/";
}
createCookie('foo', 'bar', 1); // 有效期1天

1. 创建完Cookie后，可以通过JS来读取和修改Cookie。例如，读取名为foo的Cookie：

function readCookie(name) {
  const nameEQ = name + "=";
  const ca = document.cookie.split(';');
  for(let i=0;i < ca.length;i++) {
    let 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;
}
const cookieValue = readCookie('foo');
console.log(cookieValue); // bar

以上是手动创建和存储Cookie的完整攻略，以下列举两个代码示例说明：

示例一：实现一个保存登录账号的功能，通过Cookie记录用户登录状态

function login() {
  const username = document.getElementById("username").value;
  const password = document.getElementById("password").value;
  if (username == "admin" && password == "123") {
    createCookie("user", username, 7);
    window.location.href = "homepage.html";
  } else {
    alert("用户名或密码错误，请重新输入");
  }
}

上面的 login() 方法实现了用户登录的逻辑，在用户登录成功后，通过 createCookie() 方法创建了一个名为user，值为用户名的Cookie，并设置了7天的有效期。在用户访问其他需要登录才能访问的页面时，可以通过读取Cookie来验证用户的登录状态。

示例二：实现一个保存用户选择主题的功能，通过Cookie记录用户选择的主题

function changeTheme(theme) {
  document.body.className = theme;
  createCookie("theme", theme, 30);
}
const themeCookie = readCookie("theme");
if (themeCookie) {
  document.body.className = themeCookie; // 设置页面主题
}

上面的 changeTheme() 方法实现了切换主题的逻辑，并且通过 createCookie() 方法将用户选择的主题记录为名为theme的Cookie，并设置了30天的有效期。在用户下次访问同一个网站时，可以通过 readCookie() 方法读取用户选择的主题，并设置页面的主题颜色。