使用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());//存储选中的radiovar 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(),分别用来设置需要存储的值和获取已存储的值。