使用localStorage存儲表單數據

當咱們在頁面中填寫表單時,經常但願在頁面發生跳轉或刷新時可以保留以前填寫的數據。H5中的Web Storage API能夠幫助咱們在客戶端上存儲填寫的表單數據。
下面經過一個例子來講明用法。javascript

HTML代碼java

<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

//別忘了先引入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(),分別用來設置須要存儲的值和獲取已存儲的值。ui

相關文章
相關標籤/搜索