javaScript--6 sessionStorage與localStorage 設置與獲取

<!DOCTYPE html>
<html>

<head>
  <title>本地存儲</title>

  <script>
    function setSessionStorage() {
      //添加sessionStorage
      var name = document.getElementById("setSessionStorage").value;
      var value = document.getElementById("sessionStorageParam").value;
      window.sessionStorage.setItem(name, value);
    }

    function getSessionStorage() {
      //獲取sessionStorage
      var name = document.getElementById("getSessionStorage").value;
      var value = window.sessionStorage.getItem(name);
      if (value != null) {
        document.getElementById("sessionStorageValue").innerText = value;
      } else {
        document.getElementById("sessionStorageValue").innerText = name + "暫無數據";
      }
    }

    function setlocalStorage() {
      //添加sessionStorage
      var name = document.getElementById("setlocalStorage").value;
      var value = document.getElementById("localStorageParam").value;
      window.localStorage.setItem(name, value);
    }

    function getlocalStorage() {
      //獲取sessionStorage
      var name = document.getElementById("getlocalStorage").value;
      var value = window.localStorage.getItem(name);
      if (value != null) {
        document.getElementById("localStorageValue").innerText = value;
      } else {
        document.getElementById("localStorageValue").innerText = name + "暫無數據";
      }
    }
  </script>
</head>

<body>
  <h1>sessionStorage</h1>
  設置SessionStorage：<br />
  名稱：<input type="text" id="setSessionStorage" /> 參數：<input type="text" id="sessionStorageParam" /> <input type="button"
    value="添加sessionStorage" onclick="setSessionStorage()" /><br />

  獲取SessionStorage：<br />
  名稱：<input type="text" id="getSessionStorage" /><span id="sessionStorageValue"></span>
  <br />
  <input type="button" value="獲取sessionStorage" onclick="getSessionStorage()" />

  <h1>localStorage</h1>
  設置localStorage：<br />
  名稱：<input type="text" id="setlocalStorage" /> 參數：<input type="text" id="localStorageParam" /> <input type="button"
    value="添加localStorage" onclick="setlocalStorage()" /><br />

  獲取localStorage：<br />
  名稱：<input type="text" id="getlocalStorage" /><span id="localStorageValue"></span>
  <br />
  <input type="button" value="獲取localStorage" onclick="getlocalStorage()" />
</body>

</html>
posted @ 2022-10-03 15:10 怪圣卡杰閱讀(476) 評論(0) 收藏舉報
刷新頁面返回頂部
javaScript--6 sessionStorage與localStorage 設置與獲取

公告
