关键词

什么是cookie?js手动创建和存储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() 方法读取用户选择的主题,并设置页面的主题颜色。

本文链接:http://task.lmcjl.com/news/8835.html

展开阅读全文