HTML5记住账号和密码

版权声明:正在学习中,有错误欢迎指出。感谢比❤❤~ https://blog.csdn.net/gx17864373822/article/details/83276818
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>

  账号:<input type="text" id="user"> 密码:
  <input type="password" id="pwd"> 记住密码:
  <input type="checkbox" id="remember">
  <button onclick="fn()">登录</button>

  <script type="text/javascript">
    var user = document.getElementById('user'),
      pass = document.getElementById('pwd'),
      check = document.getElementById('remember'),
      localUser = localStorage.getItem('user') || ''; //获取到user的值并保存
      localPass = localStorage.getItem('pass') || ''; //获取到pwd的值并保存
      user.value = localUser;
      pass.value = localPass;
      if (localUser !== '' && localPass !== '') {
        check.setAttribute('checked', '');
      }

    function fn() {
      if (check.checked) {
        localStorage.setItem('user', user.value);
        localStorage.setItem('pass', pass.value);
      } else {
        localStorage.setItem('user', '');
        localStorage.setItem('pass', '');
      }
    }
  </script>

</body>

</html>

猜你喜欢

转载自blog.csdn.net/gx17864373822/article/details/83276818