Как кэшировать данные из <select>
?
Как сохранять value из select в кэш и выводить их на другой станице?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуВам нужен не кеш, а куки... SetCookie для установки значений в память браузера. GetCookie для получения значений из памяти. https://learn.javascript.ru/cookie В статье описана установка и чтение куки
// возвращает cookie с именем name, если есть, если нет, то undefined
function getCookie(name) {
var matches = document.cookie.match(new RegExp(
"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=
([^;]*)"
));
return matches ? decodeURIComponent(matches[1]) : undefined;
}
document.cookie = "userName=Vasya";
getCookie("userName")
Как вариант, также можно использовать localStorage. При выборе элемента списка записывать в него ключ, со значением выбранного элемента. Затем, в любом нужном месте проверять наличие этого ключа, и если он есть, то активным элементом списка ставить его значение.
Пример на jsfiddle
// Выбираем на странице нужный select
var mySelect = document.getElementById('mySelct');
// При событии "изменения" нашего списка (выборе элемента) выполняем функцию
mySelect.onchange = function () {
// Берём значение выбранного элемента списка
item = this.options[this.selectedIndex].value;
// Выводим в консоль
console.log('Выбран', item);
// Записываем в localStorage значение выбранного элемента списка
localStorage.setItem('activeSelect', item);
}
/* ...
А где надо проверяем, есть ли в localStorage ключ activeSelect.
Если он есть, то значит ранее был выбран элемент списка.
Значением этого ключа является value выбранного ранее элемента списка.
*/
var activeSelect = localStorage.getItem('activeSelect');
// Проверяем есть ли такой ключ
if(activeSelect) {
// Выводим в консоль
console.log('Есть в localStorage', activeSelect);
// "Активным" элементом делаем тот, к которого значение, как то,
// что мы сохранили в activeSelect ранее )
mySelect.value = activeSelect;
}
<select id="mySelct">
<option value="1">Раз</option>
<option value="2">Два</option>
<option value="3">Три</option>
</select>
И конечно, когда больше нет необходимости хранить этот ключ, стоит удалить его:
localStorage.removeItem('activeSelect');
select
- var mySelect = document.getElementById('mySelct');
. Фрагмент в ответе начинающийся с var activeSelect ...
как раз таки и отвечает за проверку на наличие ключа. Хотя у меня подозрение, что лучше на стороне сервера такого рода вещи делать, но если требуется на клиенте, то так должно работать.
25 июл 2017 в 7:16
mySelect
вы выбирали для того, чтобы навесить событие "onchange", а в activeSelect
хранится значение выбранного элемента списка. В ответе расписал более подробно комментарии для наглядности.
25 июл 2017 в 15:17