Как сделать js выпадающий список из массива localstorage

Аватар пользователя Кирилл Шацкий
Кирилл Шацкий
17 ноября 2022

Стоит начать с того, что в localStorage можно хранить только строковые значения. Соответственно, наилучшим способом в данном случае будет записывать в localStorage JSON-строку.

Например, у нас есть вот такой объект:

const list = {
   key1: value1,
   key2: value2,
   key3: value3
}

Приведём к формату JSON-строки и запишем в localStorage:

localStorage.setItem('list', JSON.stringify(list));

Таким образом, в localStorage под ключом list у нас окажется JSON-строка.

Допустим, в HTML у нас есть какой-то select, куда мы хотим поместить выпадающий список из localStorage:

<select class="my-select">

</select>

Получим данные для нашего списка из localStorage и преобразуем обратно в объект:

const selectData = JSON.parse(localStorage.getItem('list'));

Теперь обойдём этот объект с помощью цикла и полученные элементы запишем в select:

// Создадим пустую строку, куда будем закидывать теги option для списка
let selectHTML = ''; 

// Циклом обходим объект, полученный из LS и записываем в selectHTML 
for (const key in selectData) {
   selectHTML += `<option value="${key}">${selectData[key]}</option>`;
}

// Выбираем наш выпадающий список и записываем в него обработанные ранее данные
document.querySelector('.my-select').innerHTML = selectHTML;

Таким образом, в HTML мы получим следующую картину:

<select class="my-select">
   <option value="key1">value1</option>
   <option value="key2">value2</option>
   <option value="key3">value3</option>
</select>
0 0
Познакомьтесь с основами JavaScript бесплатно