Сохранить выбранное значение в раскрывающемся списке после обновления страницы

Question

У меня есть кнопка, чтобы отфильтровать список на основе выбора из нескольких раскрывающихся значений. Однако я сталкиваюсь с проблемой, из-за которой после нажатия кнопки страница обновляется, и раскрывающиеся значения сбрасываются до значений по умолчанию. Как я могу гарантировать, что после обновления выбранные значения сохранятся в раскрывающемся списке?

<div><select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
  </select>

   <select>
    <option value="ford">ford</option>
    <option value="chevy">Chevy</option>
    <option value="ram">Ram</option>
    <option value="jeep">Jeep</option>
   </select>

   <button id="button" onclick="filterMyList()">Filter</button>
  </div>

Любые предложения о том, как это можно сделать? Благодарю.

Answer 1

You can use the HTML5 localStorage api ( http://www.w3schools.com/html/html5_webstorage.asp)

Пример для вашего случая:

$(document).ready(function() {
    // On refresh check if there are values selected
    if (localStorage.selectVal) {
            // Select the value stored
        $('select').val( localStorage.selectVal );
    }
});

// On change store the value
$('select').on('change', function(){
    var currentVal = $(this).val();
    localStorage.setItem('selectVal', currentVal );
});

Надеюсь это поможет. Держи меня в курсе.