两种新的 Web 储存方式,一种是 localStorage,另一种是 sessionStorage。下面分别介绍:

localStorage

是没有时间限制的数据储存,只要用户不主动删除,数据一直都在。

sessionStorage

当会话被关闭后(关闭浏览器或标签),储存的数据被删除。

实现这两种方式的示例代码如下:

<body>  
  <div>
    <textarea id="txt" style="width: 200px; height: 200px;"></textarea>
    <button id="btn">save via localStorage</button>
  </div>
  <div>
    <textarea id="sessionTxt" style="width: 50px; height: 50px;"></textarea>
    <button id="sessionButton">operation via localStorage</button>
  </div>
  <script>
    var txt = document.getElementById("txt");
    var btn = document.getElementById("btn");
    var sessionText = document.getElementById("sessionTxt");
    var sessionBtn = document.getElementById("sessionButton");
    var currentNum = 0;

    if (localStorage.text) {
      txt.value = localStorage.text;
    }

    btn.onclick = function () {
      if (txt.value) {
        localStorage.setItem("text", txt.value);
      }
    }

    if (sessionStorage.num) {
      sessionText.value = sessionStorage.num;
      currentNum = sessionStorage.num;
    } else {
      sessionText.value = 0;
    }

    sessionBtn.onclick = function () {
      currentNum++;
      sessionText.value = currentNum;
      sessionStorage.setItem("num", currentNum);
    }
  </script>
</body>