使用localStorage存储表单数据

当我们在页面中填写表单时，常常希望在页面发生跳转或刷新时能够保留之前填写的数据。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(),分别用来设置需要存储的值和获取已存储的值。