js 使用localStorage本地存储用户名、密码

约 141 字小于 1 分钟

2025-07-30

效果图如下：

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <style>
    #check {
      width: 15px;
      height: 15px;
    }
  </style>
  <body>
    <span>用户名：</span>
    <input id="uname" />
    <span>密码</span>
    <input type="password" id="psw" />
    <br />
    <br />
    <input type="checkbox" id="check" />
    <span>存储用户名、密码到本地</span>
  </body>
  <script>
    var uname = document.querySelector("#uname");
    var psw = document.querySelector("#psw");
    var check = document.querySelector("#check");

    uname.addEventListener("change", () => {
      if (!localStorage.getItem(uname.value)) {
        check.checked = false;
      }
    });
    check.addEventListener("change", () => {
      if (check.checked) {
        //选中，记住账号名和密码
        localStorage.setItem(uname.value, psw.value);
        console.log(localStorage.getItem(uname.value));
      }
    });
  </script>
</html>