JavaScript 利用Cookie记录用户登录信息-前端开发

下面是详细讲解“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来记录用户输入信息。

实现步骤：

监听表单输入事件，当用户输入时，将数据保存到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 "";
}

// 监听表单输入事件
document.querySelector("#myForm").addEventListener("input", function() {
  let formData = JSON.stringify(serialize(this));
  setCookie("formData", formData, 7);
});

// 页面加载时自动填充上次保存的表单数据
window.onload = function() {
  let cookieFormData = getCookie("formData");
  if (cookieFormData) {
    let formDataObj = JSON.parse(cookieFormData);
    let inputElems = document.querySelectorAll("#myForm input");
    for (let i = 0; i < inputElems.length; i++) {
      let inputElem = inputElems[i];
      if (formDataObj[inputElem.name]) {
        inputElem.value = formDataObj[inputElem.name];
      }
    }
  }
}

// 序列化表单数据
function serialize(form) {
  if (!form || form.nodeName !== "FORM") {
    return;
  }

  let i, j, obj = {};
  for (i = form.elements.length - 1; i >= 0; i = i - 1) {
    if (form.elements[i].name === "") {
      continue;
    }
    switch (form.elements[i].nodeName) {
      case 'INPUT':
        switch (form.elements[i].type) {
          case 'text':
          case 'hidden':
          case 'password':
          case 'button':
          case 'reset':
          case 'submit':
            obj[form.elements[i].name] = form.elements[i].value;
            break;
          case 'checkbox':
          case 'radio':
            if (form.elements[i].checked) {
              obj[form.elements[i].name] = form.elements[i].value;
            }
            break;
          case 'file':
            break;
        }
        break;
      case 'TEXTAREA':
        obj[form.elements[i].name] = form.elements[i].value;
        break;
      case 'SELECT':
        switch (form.elements[i].type) {
          case 'select-one':
            obj[form.elements[i].name] = form.elements[i].value;
            break;
          case 'select-multiple':
            for (j = form.elements[i].options.length - 1; j >= 0; j = j - 1) {
              if (form.elements[i].options[j].selected) {
                obj[form.elements[i].name] = form.elements[i].options[j].value;
              }
            }
            break;
        }
        break;
      case 'BUTTON':
        switch (form.elements[i].type) {
          case 'reset':
          case 'submit':
          case 'button':
            obj[form.elements[i].name] = form.elements[i].value;
            break;
        }
        break;
    }
  }
  return obj;
};

以上是JavaScript利用Cookie记录用户登录信息的完整攻略及其两个示例说明。