配列を含むlocalStorageを使用して値をロードするにはどうすればよいですか？

$(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 
 
    }) 
 
\t 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> 
 
\t \t \t \t \t \t \t \t <tr class="info" id="alertr1"> 
 
            <td width="30px">1</td> 
 
\t \t \t \t \t \t \t \t \t <td width="200px">Likes Authority</td> 
 
            <td width="75px;"> 
 
\t \t \t \t \t \t \t \t \t \t <select class="r1" style="position: absolute; z-index:9999;" 
 
\t \t \t \t \t \t \t \t \t \t \t onmouseover="this.size=this.options.length" 
 
\t \t \t \t \t \t \t \t \t \t \t onmouseout="this.size=1" onchange="this.size=1" name="qtyL" > \t 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="0">-</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="1" >1</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="2" >2</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="3" >3</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="4" >4</option> 
 
\t \t \t \t \t \t \t \t \t \t </select> 
 
\t \t \t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t \t \t <td width="200px">Enthusiastic</td> 
 
            <td width="75px;"> 
 
\t \t \t \t \t \t \t \t \t \t <select class="r1" style="position: absolute; z-index:9999;" 
 
\t \t \t \t \t \t \t \t \t \t \t onmouseover="this.size=this.options.length" 
 
\t \t \t \t \t \t \t \t \t \t \t onmouseout="this.size=1" onchange="this.size=1" name="qtyO" > \t 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="0">-</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="1" >1</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="2" >2</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="3" >3</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="4" >4</option> 
 
\t \t \t \t \t \t \t \t \t \t </select> 
 
\t \t \t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t \t \t <td width="200px">Sensitive Feelings</td> 
 
\t \t \t \t \t \t \t \t \t <td width="75px;"> 
 
\t \t \t \t \t \t \t \t \t \t <select class="r1" style="position: absolute; z-index:9999; " 
 
\t \t \t \t \t \t \t \t \t \t \t onmouseover="this.size=this.options.length" 
 
\t \t \t \t \t \t \t \t \t \t \t onmouseout="this.size=1" onchange="this.size=1" name="qtyG" > \t 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="0">-</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="1" >1</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="2" >2</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="3" >3</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="4" >4</option> 
 
\t \t \t \t \t \t \t \t \t \t </select> 
 
\t \t \t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t \t \t <td width="180px">Likes Instructions</td> 
 
\t \t \t \t \t \t \t \t \t <td width="75px;"> 
 
\t \t \t \t \t \t \t \t \t \t <select class="r1" style="position: absolute; z-index:9999; " 
 
\t \t \t \t \t \t \t \t \t \t \t onmouseover="this.size=this.options.length" 
 
\t \t \t \t \t \t \t \t \t \t \t onmouseout="this.size=1" onchange="this.size=1" name="qtyB" > \t 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="0">-</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="1" >1</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="2" >2</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="3" >3</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="4" >4</option> 
 
\t \t \t \t \t \t \t \t \t \t </select> 
 
\t \t \t \t \t \t \t \t \t </td> 
 
           </tr> 
 
           <tr class="danger" id="alertr2"> 
 
            <td>2</td> 
 
\t \t \t \t \t \t \t \t \t <td>Takes Charge</td> 
 
            <td> 
 
\t \t \t \t \t \t \t \t \t \t <select class="r2" style="position: absolute; z-index:9998;" 
 
\t \t \t \t \t \t \t \t \t \t \t onmouseover="this.size=this.options.length" 
 
\t \t \t \t \t \t \t \t \t \t \t onmouseout="this.size=1" onchange="this.size=1" name="qtyL" > 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="0">-</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="1" >1</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="2" >2</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="3" >3</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="4" >4</option> 
 
\t \t \t \t \t \t \t \t \t \t </select> 
 
\t \t \t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t \t \t <td>Takes Risks</td> 
 
            <td> 
 
\t \t \t \t \t \t \t \t \t \t <select class="r2" style="position: absolute; z-index:9998;" 
 
\t \t \t \t \t \t \t \t \t \t \t onmouseover="this.size=this.options.length" 
 
\t \t \t \t \t \t \t \t \t \t \t onmouseout="this.size=1" onchange="this.size=1" name="qtyO" > \t 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="0">-</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="1" >1</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="2" >2</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="3" >3</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="4" >4</option> 
 
\t \t \t \t \t \t \t \t \t \t </select> 
 
\t \t \t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t \t \t <td>Loyal</td> 
 
\t \t \t \t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t \t \t \t \t <select class="r2" style="position: absolute; z-index:9998; " 
 
\t \t \t \t \t \t \t \t \t \t \t onmouseover="this.size=this.options.length" 
 
\t \t \t \t \t \t \t \t \t \t \t onmouseout="this.size=1" onchange="this.size=1" name="qtyG" > \t 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="0">-</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="1" >1</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="2" >2</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="3" >3</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="4" >4</option> 
 
\t \t \t \t \t \t \t \t \t \t </select> 
 
\t \t \t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t \t \t <td>Accurate</td> 
 
\t \t \t \t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t \t \t \t \t <select class="r2" style="position: absolute; z-index:9998; " 
 
\t \t \t \t \t \t \t \t \t \t \t onmouseover="this.size=this.options.length" 
 
\t \t \t \t \t \t \t \t \t \t \t onmouseout="this.size=1" onchange="this.size=1" name="qtyB" > \t 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="0">-</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="1" >1</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="2" >2</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="3" >3</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="4" >4</option> 
 
\t \t \t \t \t \t \t \t \t \t </select> 
 
\t \t \t \t \t \t \t \t \t </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> \t 
 
</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、私はR1からR10にあるフォームといくつかのクラス名を持っていました。 1列には4つの選択肢がありました。列はr10まででした。今、私は、各行の内容を読み込んで配列に格納するjquery関数を得ました。どのようにこれらの配列を特定の行と列に呼び出すことができますか？たとえば、2,3,1,4のr1を選択した場合、ユーザーは現在のページを離れた後、もう一度戻って以前の入力を表示するように要求します。 r1の選択オプションは自動的に2,3,1,4で埋められます。ありがとう。

出典

2017-05-17 Beginner

ここにフィドルまたはコードスニペットを作成できますか？ –

はい、しばらくお待ちください。 – Beginner

@DarrenSweeneyすでに更新済みです。ありがとう、ありがとう。 – Beginner

まず、すべてのvar res = {};あなたが値BTNクリックするたびに、あなたの解像度の変数はグローバルであり、あなたが

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

注c1にここattrの名前を知っていると仮定すると、

をリセットする他のグローバルでなければなりません：Plsはヌルを追加それに応じてチェックします

出典

2017-05-17 16:34:27 Ashish451

それは私が関数の外に宣言しなければならないということですか？ – Beginner

はい。それはグローバルでなければならず、イベントの影響を受けてはならない。 – Ashish451

いいえ。それは本当に良いスタイルではないが、ローカルにすることができます。あなたの答えがわれわれに見せてくれるのは分かりません... –

LocalStorageは文字列のみをサポートするので、正しい方法はJSON.stringify(res));です。今度はそのデータに再びアクセスしたい場合は、

$(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++; 
     } 
    } 

}

出典

2017-05-17 16:50:22

はい！私はまた、負荷を行う方法がわからない、私はちょうど初心者です、ありがとう！しかし、私は文法エラー** Uncaught SyntaxError：missing）引数リストの後に** – Beginner

私のanswere、$（document）.ready（function（）{}）の更新を見てください。あなたがjqueryを使用している場合に行く方法です。構文エラーに関して私の悪いことでしたが、私はコードを実行しませんでした。行5の閉じ括弧を追加しました。 –

ありがとうございましたが、これは私にとってはうまくいかなかった:(ありがたくとにかく） – Beginner

配列を含むlocalStorageを使用して値をロードするにはどうすればよいですか？

答えて

関連する問題