Как сохранить результат работы скрипта для пользователя при перезагрузке страницы, а может быть даже навсегда?

Question

[DmSS1997]

Имеется скрипт, который выполняет изменение текста в блоке в зависимости от value в выбранном селекте:

document.getElementById("myselect").addEventListener("change", function () {
document.getElementById('street').innerHTML = this.value;
});

Код работает правильно. Но при перезагрузке страницы, значение возвращается к изначальному. А мне нужно, чтобы выбранные данные сохранялись у пользователя. Читал про куки и LocalStorage, но не понимаю, как они работают. Помогите пожалуйста

Comments

[Стефан]

А что не понятного в LocalStorage? Записал значение - взял значение. PROFIT!

[DmSS1997]

На простых примерах с именем всё понятно, но я не понимаю, как это использовать на моём примере.

Вот я сохраняю функцию в переменную chText

chText = document.getElementById("myselect").addEventListener("change", function () {
    document.getElementById('street').innerHTML = this.value;
});

Дальше записываю значение в хранилище
localStorage.setItem('changingText', chText);

Как дальше вызвать сохранённые данные?
localStorage.getItem('changingText');

Так у меня к сожалению не работает(

Answer 1

[Денис Щербина]

Локальное хранилище есть, смотри:
1) Вот так записать что-либо в хранилище:
localStorage.setItem('name', 'Tom');
2) Вот так считать ранее записанные данные:
let test = localStorage.getItem('name');
console.log('test = ', test);

данные, находящиеся в свойстве localStorage, не имеют ограничений по времени хранения

Comments

[DmSS1997]

Я понимаю, как это работает в данном примере, но я не понимаю, как написать код для моего случая, когда вызывается функция. Что сохранять в setItem нужно? Функцию?

[Денис Щербина]

DmSS1997, сейчас нет возможности протестировать вариант, вот примерный код, он должен работать:

// Это при загрузке страницы:
async function set_data_in_page() {
  let value = await localStorage.getItem('value');
    document.getElementById("myselect").addEventListener("change", function () {
    document.getElementById('street').innerHTML = value;
  });
}

// Это чтобы сохранить данные
async function get_data_from_page() {
    localStorage.setItem('value',  this.value);
}

[DmSS1997]

Денис Щербина, Спасибо, я уже справился. Немного переделал изначальный скрипт

// Скрипт для изменения текста в зависимости от селкта
    select.addEventListener("change", function () {
    if (this.value == 'Город1') {
        document.getElementById('street').innerHTML = street1;
    } else {
        document.getElementById('street').innerHTML = street2;
    }
});

Где select и street переменные
И вот такой код получился для localStorage:

select.onchange = function() {
localStorage.setItem('chText', select.value);
};
window.onload= function(){
if (localStorage.getItem('chText') == 'Город1'){
  select.value = localStorage['chText'];
  document.getElementById('street').innerHTML = street1;
} else if (localStorage.getItem('chText') == 'Город 2'){
  select.value = localStorage['chText'];
  document.getElementById('street').innerHTML = street2;