JavaScript 利用Cookie记录用户登录信息

下面是详细讲解“JavaScript 利用Cookie记录用户登录信息”的完整攻略：

什么是Cookie

Cookie即“小甜饼”，是浏览器存储在客户端（电脑客户端、手机客户端等）中的一小段文本，在HTTP请求和响应中被发送和接收。Cookie能够跟踪用户的活动并在用户重访时保存有关用户的信息。Cookie可以使用JavaScript进行控制。

利用Cookie记录用户登录信息的步骤

在用户登录过程中，在后端服务器中（如PHP）将用户ID和密码组成一个字符串，并使用加密算法对其进行加密。
将加密后的字符串存储为一个Cookie并发送给客户端。
用户浏览器接收到这个Cookie并存储在其中，当用户请求网站的其他页面时，浏览器将根据设置的Cookie发送给服务器。
后端服务器将会校验Cookie的有效性，如果Cookie有效就代表用户已经登录。

源代码：

登录页面html代码

  <form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username"><br>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password"><br>
    <button type="button" onclick="check()">登录</button>
  </form>

登录页面JavaScript代码

function check() {
  // 获取用户名和密码输入框的值
  let username = document.getElementById("username").value;
  let password = document.getElementById("password").value;

  // 判断输入是否为空
  if (!username) {
    alert("请输入用户名！");
    return;
  }
  if (!password) {
    alert("请输入密码！");
    return;
  }

  // 加签名
  let sign = btoa(username + "|" + password);
  let cookieText = `user=${sign}`;

  // 设置Cookie
  let expires = new Date(Date.now() + 7 * 24 * 3600 * 1000).toGMTString();
  document.cookie = `${cookieText}; expires=${expires}`;

  alert("登录成功！");
}

其他页面JavaScript代码

function checkLogin() {
  // 获取Cookie
  let regStr = "(^| )user=([^;]*)(;|\x24)";
  let reg = new RegExp(regStr);
  let result = reg.exec(document.cookie);
  if (result) {
    let sign = result[2];
    let data = atob(sign).split("|");
    let username = data[0];
    let password = data[1];

    // 发送Ajax请求到后端验证身份
    $.ajax({
      url: "/check_login.php",
      data: {
        username: username,
        password: password,
      },
      type: "post",
      dataType: "json",
      success: function (data) {
        if (data.success) {
          alert("已经登录！");
          // do something
        } else {
          alert("请先登录！");
          // do something
        }
      },
    });
  } else {
    alert("请先登录！");
    // do something
  }
}

示例说明

示例1：记录用户选择的主题

在网站中，用户可以选择不同的主题，比如深色主题、浅色主题等，这些主题与用户的当次访问有关。如果用户再次访问网站时，希望网站显示上一次选择的主题。利用Cookie记录用户选择的主题可以实现这个需求。

实现步骤：

在用户选择主题时，将主题名称或其它标识作为Cookie的值存储在客户端。
当用户再次访问网站时，自动从Cookie值中读取用户上次选择的主题，并应用到网站页面中。

JavaScript代码示例：

// 定义函数，用于设置Cookie的值
function setCookie(cname, cvalue, exdays) {
  let d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  let expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

// 定义函数，用于获取Cookie的值
function getCookie(cname) {
  let name = cname + "=";
  let ca = document.cookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

// 获取用户选择的主题，此处以radio按钮为例
document.getElementById("themeRadio").addEventListener("click", function() {
  let theme = document.querySelector('input[name="theme"]:checked').value;
  setCookie("theme", theme, 7);
});

// 页面加载时自动应用上次选择的主题
window.onload = function() {
  let cookieTheme = getCookie("theme");
  if (cookieTheme) {
    document.getElementById(cookieTheme).checked = true;
    // 应用主题，需要根据具体情况调用不同的方法或API
    applyTheme(cookieTheme);
  }
}

示例2：记住用户的输入信息

在网站中，用户可能需要填写一些表单信息，比如注册、留言等。如果用户在访问该网站时，希望能够保存上次填写的表单数据，可以使用Cookie来记录用户输入信息。