當我們在頁面中填寫表單時，經常願望在頁面發作跳轉或革新時能夠保存之前填寫的數據。H5中的Web Storage API能夠協助我們在客戶端上存儲填寫的表單數據。
下面經由過程一個例子來申明用法。

HTML代碼

<form>
    <p>
      <label for="name">姓名</label>
      <input type="text" id="name">
    </p>
    <p>
      <input type="radio" name="sex" id="male" value="教師">教師
      <input type="radio" name="sex" id="female" value="密斯">密斯
    </p>
    <p>
      <label for="phone">聯繫電話</label>
      <input type="number" id="phone">
    </p>

    <select name="province" id="province">
      <option value="jiangsu">江蘇</option>
      <option value="anhui">安徽</option>
      <option value="hunan">湖南</option>
      <option value="fujian">福建</option>
    </select>
    <p>
        <input type="submit" id="formSave">
    </p>
  </form>

javascript代碼

//別忘了先引入jquery
<script src="jquery-3.2.1.js"></script>
  <script>
    //在存儲中設置值
    $("#formSave").click(function () {
      //存儲輸入框中填入的值
      localStorage.setItem("name", $("#name").val());
      localStorage.setItem("phone", $("#phone").val());
      localStorage.setItem("province", $("#province").val());
      //存儲選中的radio
      var k_val = $(":radio[name=sex]:checked").val();
      localStorage.setItem("k_val", k_val);
    })
    //從存儲中獵取值
    $(
      function myStorage() {
        //革新后從新獵取輸入框中填入的值
        var name = localStorage.getItem("name");
        var phone = localStorage.getItem("phone");
        var province = localStorage.getItem("province");
        //將從新獵取的值顯現到表單元素中
        $("#name").val(name);
        $("#phone").val(phone);
        $("#province").val(province);
        //從新讀取選中的radio
        $(":radio").removeAttr("checked");//這裏很重要
        var kk_val = localStorage.getItem("k_val");; 
        $(':radio').each(function () {
          if ($(this).val() == kk_val) {
            $(this).prop("checked", true);
          }
        })
      }
    )
    myStorage();
  </script>

這裏重要用到了localStorage.setItem()和localStorage.getItem(),離別用來設置須要存儲的值和獵取已存儲的值。