使用js实现记住密码功能

1使用cookie实现记住密码功能

1.1 设置cookie

在用户登录成功后，可以使用js将用户名和密码以cookie的形式保存在浏览器中，代码如下：

//定义函数，记住密码
function rememberMe(uname, upass) {
  let expires = new Date();
  // 设置cookie的过期时间为7天后
  expires.setDate(expires.getDate() + 7);
  // 将用户名和密码使用冒号:隔开，拼接成一个字符串
  let loginInfo = `${uname}:${upass}`;
  // 将字符串保存到cookie中
  document.cookie = `loginInfo=${loginInfo};expires=${expires.toGMTString()}`;
}

●expires 是设置 cookie 的过期时间，通过 setDate 方法设置为当前日期 + 7 天后的时间；
●loginInfo 是将用户名和密码使用冒号隔开拼接成的字符串，便于在下次登录时解析；
●document.cookie 是将字符串保存到 cookie 中，其中 expires 是通过 toGMTString() 方法将过期时间转化为 GMT 格式；

1.2获取cookie

在下次访问登录页面时，可以使用js从浏览器中获取保存的用户名和密码，代码如下：

function getLoginInfo() {
  let cookie = document.cookie;
  let cookies = cookie.split("; ");
  let loginInfo = "";
  for (let ck of cookies) {
    let name = ck.split("=")[0];
    if (name == 'loginInfo') {
      loginInfo = ck.split("=")[1]
      break;
    }
  }
  if (loginInfo !== "") {
    // admin:123
    let userInfo = loginInfo.split(":");
    // 返回用户名和密码组成的对象
    return { username: userInfo[0], password: userInfo[1] };
  } else {
    return null;
  }
}

●document.cookie是从浏览器中获取保存的cookie；
●cookie.split("; ")是将cookie字符串按照分号空格分割成数组；
●loginInfo是用来保存当前登录用户的用户名和密码；
●userInfo 是将用户名和密码从字符串中分离出来，组成一个包含两个属性的对象；

1.3示例

下面以一个简单的登录页面为例，演示如何使用cookie实现记住密码功能。