HTML5记住账号和密码

最新推荐文章于 2023-01-30 10:58:48 发布

肉丸不肉

最新推荐文章于 2023-01-30 10:58:48 发布

阅读量9.9k

点赞数 5

分类专栏：前端

本文链接：https://blog.csdn.net/gx17864373822/article/details/83276818

版权

前端专栏收录该内容

60 篇文章 0 订阅

订阅专栏

<!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>

优惠劵

肉丸不肉

关注关注

5
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
HTML5记住账号和密码

&lt;!DOCTYPE html&gt;&lt;html lang="en" dir="ltr"&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;body&gt; 账
复制链接

扫一扫