Wie stelle ich den HTML-Inhalt nach dem Neuladen der Seite wieder her?

Question

Ich habe den HTML-Inhalt wie unten:

<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"> 

Ich habe auch eine nächste Taste, die auf Klick auf das nächste li Element geht und versteckt die vorherige. Innerhalb des li Tags haben wir viele Optionen zur Auswahl. Ich möchte alle ausgewählten Optionen speichern und wiederherstellen, nachdem die Seite neu geladen wurde, und von dort fortfahren, wo sie übrig war.

Answer 1

Sie möchten es in localStorage speichern und dann abrufen.

$('.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 

Dann an der Spitze Ihrer Jquery, etwas wie.

 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. 
    } 

wieder ... Ich weiß nicht, Ihren genauen Code für den Click-Handler, und für Elemente der Liste aktive Anwendung, so wird es nicht beexactly wie diese. Aber das ist die Idee.