0

Как кэшировать данные из <select>?

Как сохранять value из select в кэш и выводить их на другой станице?

2
  • 1
    cookie, localStorage, sessionStorage
    – andreymal
    24 июл 2017 в 10:18
  • andreymal, можно пж пример кода?
    – ExposedCat
    24 июл 2017 в 10:52

2 ответа 2

1

Вам нужен не кеш, а куки... 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")
8
  • А можно пример кода?
    – ExposedCat
    24 июл 2017 в 10:25
  • нет встроенных методов SetCookie и GetCookie
    – Grundy
    24 июл 2017 в 10:34
  • Grundy, так и как реализовать тогда...
    – ExposedCat
    24 июл 2017 в 10:53
  • 1
    В ответе была ссылка, если бы вы перешли по ней, то увидели примеры кода, описание к ним и то как это работает. Если вы задаете вопрос, то следует прочитать ответ на него, в нем всё есть. 24 июл 2017 в 11:19
  • 1) Так и не понял как сохранять туда данные 2) Как указать в какое именно место страницы надо кидать данные?
    – ExposedCat
    24 июл 2017 в 11:37
1

Как вариант, также можно использовать 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');
5
  • Да, спасибо - то что надо. Только вопрос - как вызвать этот "item" в определённом месте другой странички?
    – ExposedCat
    25 июл 2017 в 6:53
  • @ArtemPro на нужной странице выбираем select - var mySelect = document.getElementById('mySelct');. Фрагмент в ответе начинающийся с var activeSelect ... как раз таки и отвечает за проверку на наличие ключа. Хотя у меня подозрение, что лучше на стороне сервера такого рода вещи делать, но если требуется на клиенте, то так должно работать. 25 июл 2017 в 7:16
  • Да, го как я понял данные сохраняются в activeSelect а не в mySelect?
    – ExposedCat
    25 июл 2017 в 14:49
  • @ArtemPro Да, mySelect вы выбирали для того, чтобы навесить событие "onchange", а в activeSelect хранится значение выбранного элемента списка. В ответе расписал более подробно комментарии для наглядности. 25 июл 2017 в 15:17
  • И брать в итоге данные из mySelect? Не очень понял - почему эта переменная будет работать на всех страницах, а та которую мы получили сразу - нет? И какой элемент под id "mySelect" ?
    – ExposedCat
    25 июл 2017 в 17:25

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.