ページの再読み込み後にHTMLコンテンツを復元するには？

Question

私は以下のようなHTMLコンテンツを持っている：

<ul class="wpProQuiz_questionList" data-type="single" data-question_id="114"> 
    <li class="wpProQuiz_questionListItem" data-remember&gt;="" data-pos="0"> 
     <span style="display:none;">1. </span> 
     <label> 
      <input class="wpProQuiz_questionInput" type="radio" value="1" name="question_49_114"> 
      option 1 
     </label> 
    </li> 
    <li class="wpProQuiz_questionListItem" data-remember&gt;="" data-pos="1"> 
     <label> 
      <input class="wpProQuiz_questionInput" type="radio" value="2" name="question_49_114"> 
      option 2 
     </label> 
    </li> 
    <li class="wpProQuiz_questionListItem" data-remember&gt;="" data-pos="2"> 
     <label> 
      <input class="wpProQuiz_questionInput" type="radio" value="3" name="question_49_114"> 
      option 3 
     </label> 
    </li> 
    <li class="wpProQuiz_questionListItem" data-remember&gt;="" data-pos="3"> 

私もクリックで次のli要素になり、以前のものを隠し、次のボタンがあります。 liタグの中には、多くの選択肢があります。 選択したすべてのオプションを保存して、ページをリロードした後に復元して、それが残された場所から続行したいとします。

Answer 1

あなたはそれをlocalStorageに保存してからリトリーブします。

$('.next').click(function(){ 
     // whatever your code is to retrieve the next li 
     // store it as var pos 
     // then do this. 
     localStorage.setItem("chosenList", pos);   

    }); 
    // I used .next here as an example, I have no idea what your click handler is actually called. 
    //So just put it whereever you are handling that 

次に、jqueryの一番上にあるようなものです。

 if(localStorage.getItem("chosenList")){ 
     // apply active class to the chosen element. 
     // I dont have all your code so don't know how you're doing this. 
     // but something like this 
     var pos = localStorage.getItem("chosenList"); 
     $('*[data-pos="'+pos+'"]').addClass('active'); 
     // Im using .active as an example. I dont know what css you are using, if any, to open the menu. 
     // Point is, you now have a stored value, you can retrieve and apply it wherever. 
    } 

再び...私は、クリックハンドラのためのあなたの正確なコードを知っているし、リスト要素に適用するためのアクティブなので、文句を言わないbeexactlyこのようにしていません。しかしこれがアイディアです。