js使用cookie实现记住用户名功能示例

发布时间：2024/02/12

使用cookie可以保存用户的登录状态，可以实现记住用户名的功能。下面是使用JavaScript实现记住用户名的完整攻略：

1. 创建登录表单

首先需要在页面上创建一个登录表单，包含用户名和密码的输入框、记住密码的复选框和提交按钮。

<form id="login-form">
  <label>用户名:</label>
  <input type="text" name="username" />
  <br />
  <label>密码:</label>
  <input type="password" name="password" />
  <br />
  <label>记住密码:</label>
  <input type="checkbox" name="remember" />
  <br />
  <input type="submit" value="登录" />
</form>

2. 获取表单数据

使用JavaScript监听表单的提交事件，获得用户名和密码输入框的值，以及是否勾选记住密码的复选框。

const form = document.getElementById('login-form');
form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单的默认提交行为

  const username = form.elements.username.value;
  const password = form.elements.password.value;
  const remember = form.elements.remember.checked;

  // 接下来执行登录逻辑
});

3. 保存Cookie

如果用户勾选了记住密码的选项，将用户名和密码保存到cookie中。

if (remember) {
  const expires = new Date();
  expires.setTime(expires.getTime() + 7 * 24 * 60 * 60 * 1000); // 过期时间为一周
  document.cookie = `username=${username};expires=${expires.toUTCString()};path=/`;
  document.cookie = `password=${password};expires=${expires.toUTCString()};path=/`;
}

4. 加载Cookie

当下次用户打开该页面时，需要检查是否保存有用户名和密码的Cookie，如果有，则将用户名和密码填充到登录表单中。

const cookies = document.cookie.split(';');
const cookieUsername = cookies.find(cookie => cookie.trim().startsWith('username='));
const cookiePassword = cookies.find(cookie => cookie.trim().startsWith('password='));

if (cookieUsername && cookiePassword) {
  const username = cookieUsername.split('=')[1];
  const password = cookiePassword.split('=')[1];
  form.elements.username.value = username;
  form.elements.password.value = password;
}

通过上述代码实现了记住用户名的功能，2条示例说明如下：

示例1：自动登录

实现自动登录功能，用户在上次登录时勾选了“记住密码”的选项，下次打开网站时，自动为用户完成登录操作。

const cookies = document.cookie.split(';');
const cookieUsername = cookies.find(cookie => cookie.trim().startsWith('username='));
const cookiePassword = cookies.find(cookie => cookie.trim().startsWith('password='));

if (cookieUsername && cookiePassword) {
  const username = cookieUsername.split('=')[1];
  const password = cookiePassword.split('=')[1];
  autoLogin(username, password); // 执行自动登录逻辑
}

示例2：清除Cookie

提供一个清除Cookie的功能，在用户点击退出登录时，清除保存的用户名和密码的Cookie。

function deleteCookie(name) {
  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
}

function logout() {
  deleteCookie('username');
  deleteCookie('password');
  // 执行退出登录的逻辑
}