Как восстановить содержимое 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

Youll хочет сохранить его в 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 как это. Но это идея.