使用LocalStorage实现Form表单内容本地存储

2018-06-24 02:12:49来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

  • 判断浏览器是否支持localStorage,并将值存入,推荐setItem方法。
 1 if(!window.localStorage) {
 2    console.log("浏览器不支持localstorage");
 3    return false;
 4 }else{
 5    var storage=window.localStorage;
 6    // 查询条件localStorage本地存储
 7    var cfdaCode = $("#cfdaCode").val();
 8    var productCode = $("#productCode").val();
 9    var approvalNumber = $("#approvalNumber").val();
10    var status = $("#status").val();
11    var productName = $("#productName").val();
12    var manufactureName = $("#manufactureName").val();
13    storage.setItem("cfdaCode", cfdaCode);
14    storage.setItem("productCode", productCode);
15    storage.setItem("approvalNumber", approvalNumber);
16    storage.setItem("status", status);
17    storage.setItem("productName", productName);
18    storage.setItem("manufactureName", manufactureName);
19 }        
  • 取出localStorage中的值,使用getItem方法。
 1 // 读取搜索条件localStorage
 2 if(!window.localStorage){
 3    console.log("浏览器不支持localstorage");
 4 }else{
 5    var storage = window.localStorage;
 6    var cfdaCode = storage.getItem("cfdaCode");
 7    var productCode = storage.getItem("productCode");
 8    var approvalNumber = storage.getItem("approvalNumber");
 9    var status = storage.getItem("status");
10    var productName = storage.getItem("productName");
11    var manufactureName = storage.getItem("manufactureName");
12    if (cfdaCode != null && cfdaCode != "") {
13        $("#cfdaCode").find("option[value='" + cfdaCode + "']").attr("selected",true);
14    }
15    $("#productCode").val(productCode);
16    $("#approvalNumber").val(approvalNumber);
17    if (status != null && status != "") {
18        $("#status").find("option[value='" + status + "']").attr("selected",true);
19    }
20    $("#productName").val(productName);
21    $("#manufactureName").val(manufactureName);
22 } 
  • 清除localStorage中的值
 1 // 重置-清除localStorage
 2 $("#reBtn").bind("click",function(){
 3   if(!window.localStorage){
 4     console.log("浏览器不支持localstorage");
 5   }else{
 6     storage.clear();
 7   }
 8   $("#cfdaCode").find("option:first").attr("selected",true);
 9   $("#productCode").val("");
10   $("#approvalNumber").val("");
11   $("#status").find("option:first").attr("selected",true);
12   $("#productName").val("");
13   $("#manufactureName").val("");
14 });

 参考:https://www.cnblogs.com/st-leslie/p/5617130.html

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:H5 视频作为背景 source src改变后 循环播放的问题笔记

下一篇:微信小程序 发现之旅(三)—— 组件之间的参数传递