Сохранение выбранного пункта select в cookie

378

15 декабря 2016, 16:25

Данный код в зависимости от выбранного <option> добавляет или удаляет у .content класс column. Можно ли сделать так, что бы значение <option> сохранялось и использовалось после перезагрузки страницы?

JS:

$(document).ready(function () {
    var $container = $('.content');
    $('#news-view').on('change', function () {
        var selectedClass = $(this).find(':selected').data('class');
        $container.toggleClass('column', selectedClass != 'line');
    });
});

HTML:

<div class="block-sort-item">
    <span>Показывать записи:</span> 
    <select id="news-view">
        <option data-class="table">Столбцом</option>
        <option data-class="line">В линию</option>
    </select>
</div>
<div class="content column">content</div>

Answer 1

Можно использовать плагин jquery.cookie.

При загрузке страницы проверяем, установлены ли cookie. Если установлены - выбираем соответствующий <option> в <select>.
При загрузке страницы и при изменении значения <select> сохраняем выбранное значение в cookie.

Код будет выглядеть так:

$(document).ready(function() {
    var $container = $('.content');
    var $select = $('#news-view');
    function handleSelectValue() {
        var selectedClass = $select.find(':selected').data('class');
        $container.toggleClass('column', selectedClass != 'line');
        $.cookie("selected", selectedClass);
    }
    var cookie = $.cookie("selected");
    if (cookie) {
        $select.find('[data-class="' + cookie + '"]').attr('selected', 'selected');
    }
    handleSelectValue();
    $select.on('change', handleSelectValue);
});

Полный пример в fiddle (в сниппете cookie не устанавливаются).

Если же сохранение нужно не на продолжительное время (равно как и серверу знать о выбранном пункте), а только в рамках текущей сессии пользователя, то проще использовать localStorage.

Для этого достаточно заменить в коде $.cookie("selected", selectedClass) на localStorage.setItem("selected", selectedClass), а $.cookie("selected") - на localStorage.getItem("selected").

Пример в fiddle.

Answer 2

Вы ищете localstorage?

Кратко, это выглядит так:

function supports_html5_storage() {
  try {
    return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) {
    return false;
  }
}
if (supports_html5_storage()) {
    var foo = localStorage.getItem("bar");
    // ...
    localStorage.setItem("bar", foo);
} else {
    alert('Срочно обновите то, чем вы просматриваете интернет!');
}