sessionStorage

Tutorial: DOM操作 Category: JS Published: 2026-04-07 13:58:26 Views: 20 Likes: 0 Comments: 0
<!DOCTYPE html>
<html lang="en">
  <head></head>

  <body>
    <input type="text" />

    <button class="set">存储数据</button>

    <button class="get">获取数据</button>

    <button class="remove">删除数据</button>

    <button class="del">清空所有数据</button>

    <script>
      console.log(localStorage.getItem("username"));

      var ipt = document.querySelector("input");
      var set = document.querySelector(".set");
      var get = document.querySelector(".get");
      var remove = document.querySelector(".remove");
      var del = document.querySelector(".del");

      set.addEventListener("click", function () {
        // 当我们点击了之后, 就可以把表单里面的值存储起来
        var val = ipt.value;
        sessionStorage.setItem("uname", val);
        sessionStorage.setItem("pwd", val);
      });

      get.addEventListener("click", function () {
        // 当我们点击了之后, 就可以把表单里面的值获取过来
        console.log(sessionStorage.getItem("uname"));
      });

      remove.addEventListener("click", function () {
        //
        sessionStorage.removeItem("uname");
      });

      del.addEventListener("click", function () {
        // 当我们点击了之后, 清除所有的
        sessionStorage.clear();
      });
    </script>
  </body>
</html>
Prev: classList使用 Next: localStorage