使用 localStorage 实现自动填充```js 用户名: 请输入用户名登录删除 ```会一直保存，关闭浏览器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        text-align: center;
      }
      form {
        display: inline-block;
        margin: 0 auto;
      }
      .left {
        text-align: left;
      }
      .green {
        background-color: green;
      }
      .red {
        background-color: red;
      }
      button {
        border: none;
        color: #fff;
        border-radius: 5px;
        padding: 5px 10px;
        margin-top: 10px;
        margin-right: 10px;
      }
      button:hover {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <form action="#" method="get">
      <table>
        <tr>
          <td>用户名:</td>
          <td>
            <input type="text" name="username" placeholder="请输入用户名" />
          </td>
        </tr>
        <tr>
          <td></td>
          <td class="left">
            <button class="green">登录</button>
            <button class="red">删除</button>
          </td>
        </tr>
      </table>
    </form>
  </body>
  <script>
    // form里面的按钮，有自动提交的功能，提交到form里面的action里面
    // 首先清除默认提交事件

    const button1 = document.querySelector("button:nth-child(1)");
    const button2 = document.querySelector("button:nth-child(2)");
    const input = document.querySelector("input");
    // 这里用到input,上面先要找到input
    // 如果localstorage里面有值，就不需要在input框输入了，直接把值给input
    if (localStorage.getItem("username")) {
      input.value = localStorage.getItem("username");
    }
    button1.onclick = function (ev) {
      ev.preventDefault();
      // 如果input框里面有值，就把值赋值给localstorage
      if (input.value) {
        localStorage.setItem("username", input.value);
      }
    };
    button2.onclick = function (ev) {
      ev.preventDefault();
      // 点击了删除按钮，input框里面就没值了

      input.value = "";
      localStorage.removeItem("username");
    };
  </script>
</html>