stackoom
  简体   繁体   中英

How can I load value using localStorage which contain array?

 原文  2017-05-17 16:13:58  8   2    javascript/ jquery/ json/ local-storage

Question

 $(function(){ $('#subbtn').click(function() { var res = {}; console.log($('#tab').find('tr')) $('tr').each(function(){ var tmp = []; var cl ; $(this).find('select').each(function(){ cl = $(this).attr('class'); //console.log(cl); tmp.push($(this).val()); }) res[cl] = tmp }) console.log(res); localStorage.setItem("testingvalue",JSON.stringify(res)); document.getElementById("results__display").innerHTML = (localStorage.getItem("testingvalue")); }) }) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body class="container centered"> <form class="content__form contact-form"> <div class="row"> <div class="col-lg-12"> <div class="bs-component" id="test1"> <table class="table table-responsive table-striped table-hover " id="tab"> <tbody> <tr class="info" id="alertr1"> <td width="30px">1</td> <td width="200px">Likes Authority</td> <td width="75px;"> <select class="r1" style="position: absolute; z-index:9999;" onmouseover="this.size=this.options.length" onmouseout="this.size=1" onchange="this.size=1" name="qtyL" > <option value="0">-</option> <option value="1" >1</option> <option value="2" >2</option> <option value="3" >3</option> <option value="4" >4</option> </select> </td> <td width="200px">Enthusiastic</td> <td width="75px;"> <select class="r1" style="position: absolute; z-index:9999;" onmouseover="this.size=this.options.length" onmouseout="this.size=1" onchange="this.size=1" name="qtyO" > <option value="0">-</option> <option value="1" >1</option> <option value="2" >2</option> <option value="3" >3</option> <option value="4" >4</option> </select> </td> <td width="200px">Sensitive Feelings</td> <td width="75px;"> <select class="r1" style="position: absolute; z-index:9999; " onmouseover="this.size=this.options.length" onmouseout="this.size=1" onchange="this.size=1" name="qtyG" > <option value="0">-</option> <option value="1" >1</option> <option value="2" >2</option> <option value="3" >3</option> <option value="4" >4</option> </select> </td> <td width="180px">Likes Instructions</td> <td width="75px;"> <select class="r1" style="position: absolute; z-index:9999; " onmouseover="this.size=this.options.length" onmouseout="this.size=1" onchange="this.size=1" name="qtyB" > <option value="0">-</option> <option value="1" >1</option> <option value="2" >2</option> <option value="3" >3</option> <option value="4" >4</option> </select> </td> </tr> <tr class="danger" id="alertr2"> <td>2</td> <td>Takes Charge</td> <td> <select class="r2" style="position: absolute; z-index:9998;" onmouseover="this.size=this.options.length" onmouseout="this.size=1" onchange="this.size=1" name="qtyL" > <option value="0">-</option> <option value="1" >1</option> <option value="2" >2</option> <option value="3" >3</option> <option value="4" >4</option> </select> </td> <td>Takes Risks</td> <td> <select class="r2" style="position: absolute; z-index:9998;" onmouseover="this.size=this.options.length" onmouseout="this.size=1" onchange="this.size=1" name="qtyO" > <option value="0">-</option> <option value="1" >1</option> <option value="2" >2</option> <option value="3" >3</option> <option value="4" >4</option> </select> </td> <td>Loyal</td> <td> <select class="r2" style="position: absolute; z-index:9998; " onmouseover="this.size=this.options.length" onmouseout="this.size=1" onchange="this.size=1" name="qtyG" > <option value="0">-</option> <option value="1" >1</option> <option value="2" >2</option> <option value="3" >3</option> <option value="4" >4</option> </select> </td> <td>Accurate</td> <td> <select class="r2" style="position: absolute; z-index:9998; " onmouseover="this.size=this.options.length" onmouseout="this.size=1" onchange="this.size=1" name="qtyB" > <option value="0">-</option> <option value="1" >1</option> <option value="2" >2</option> <option value="3" >3</option> <option value="4" >4</option> </select> </td> </tr> </tbody> </table> <div id="source-button" class="btn btn-primary btn-xs" style="display: none;">&lt; &gt;</div> </div> </div> </div> <button class="contact-form__button" id="subbtn" type="button" >Send it</button> </form> <div class="results"> <h2 class="results__heading">Form Data</h2> <pre class="results__display-wrapper"><code id="results__display"></code></pre> </div> </body>

Currenly, I had a form and some class name which is from r1 to r10. And in one row, I had 4 select option.The row was until r10. Now I got a jquery function which is read the each row content and store into a array. How can I call these array into specific row and column? For example if I choose r1 for 2,3,1,4 then user leave the current page then he come back again and request to view their previous input. The select option in r1 will automatic fill with 2,3,1,4. Thanks.

2 answers

solution1
 2  2017-05-17 16:50:22

As LocalStorage only supports strings, you go the correct way with JSON.stringify(res)); . Now if you want to access that data again you should do something like 

$(document).ready(function(){

   var jsonData = {};
   try { 
      jsonData = JSON.parse(localStorage.getItem("testingvalue"));
   } catch (error){
       console.log('could not load data from storage');
   }

   // access your data
   for(var klass in jsonData){
      var index = 0;
      $(klass).find("select").each(function(){
        // todo probably check if index exists
        $(this).val(jsonData[index]);
        index++;
      }
   }

}

solution2
 1  2017-05-17 16:34:27

First of all your var res = {}; should be global else each time you click btn value will reset

Assuming your res variable is global and you know attr name here c1 

var tmp = res[cl];
tmp[0] => will give you first value 
tmp[1]
tmp[2]
tmp[3]

Note: Pls add null checks accordingly

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How can I get the value of a localStorage array item using a variable? How can I access a value in my array of objects in localstorage? How can have a div which contain multiple multiple div it may 4-6-8 how can i fit them on page load using Jquery How I can pass a value in localStorage to InAppBrowser using executescript event How can I test for localStorage value in this example? How can I wait for the value from localStorage? Can a localStorage value be an object or array? How can I access localstorage using typescript? How can i add elements to an array and then add the arrays new value to localStorage? How to check if localStorage value is in array?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM