JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍

2023年6月11日上午8:59 • JavaScript

下面就来详细讲解“JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍”的完整攻略。

什么是Cookie？

Cookie是Web服务器发送到用户浏览器并保存在本地的一小块数据，cookie通常用于存储用户的登录信息、购物车信息等。浏览器再次访问相同的服务器时，会在HTTP请求头中自动携带该服务器之前设置的cookie，从而实现状态的保持。JavaScript可以通过操作浏览器提供的document.cookie对象来读取和写入cookie。

如何使用JavaScript中的Cookie实现记住密码功能？

实现记住密码功能的思路是：当用户在登录表单中勾选“记住密码”选项时，将用户输入的用户名和密码保存在cookie中，下一次打开页面时，判断cookie是否存在，若存在则自动填充登录表单，并登录成功。

下面是一个实现记住密码功能的代码示例：

// 存储用户名和密码到cookie中
function setLoginCookie(username, password) {
  var exdate = new Date(); // 设置过期时间为7天
  exdate.setDate(exdate.getDate() + 7);
  var loginStr = "username=" + username + ";password=" + password + ";expires=" + exdate.toGMTString();
  document.cookie = loginStr;
}

// 从cookie中读取用户名和密码
function getLoginCookie() {
  var arr = document.cookie.match(/username=([\w-]+).*password=([\w-]+)/); // 使用正则表达式匹配cookie中的用户名和密码
  if (arr != null) {
    var username = arr[1];
    var password = arr[2];
    return {
      username: username,
      password: password
    };
  } else {
    return null;
  }
}

// 判断是否勾选了“记住密码”选项
function isRememberChecked() {
  return document.getElementById("remember-me").checked;
}

// 登录函数
function login() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  // 如果勾选了“记住密码”选项，则将用户名和密码保存到cookie中
  if (isRememberChecked()) {
    setLoginCookie(username, password);
  } else { // 否则删除cookie
    document.cookie = "username=;password=;";
  }
  // 登录逻辑...
}

Cookie相关函数介绍

除了上面示例中用到的document.cookie外，JavaScript中还提供了一些操作cookie的常用函数：

encodeURIComponent(string)/decodeURIComponent(string)：对字符串进行编码/解码，以便在cookie中使用。由于cookie中不能含有特殊字符和中文等非ASCII字符，所以需要进行编码。
new Date().toGMTString()：将当前时间转换为GMT格式的字符串，用于设置cookie的过期时间。
document.cookie = cookieStr：设置cookie。cookieStr是一个字符串，格式如key1=value1; key2=value2; expires=GMTString; path=/。
document.cookie：读取cookie。
cookie.split("; ")：将cookie字符串按照;分隔成多个键值对。
cookie.indexOf(key)：查询cookie中是否包含指定的键。
cookie.substring(start, end)：截取cookie中指定键的值。