當咱們在頁面中填寫表單時,經常但願在頁面發生跳轉或刷新時可以保留以前填寫的數據。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