Как сделать 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