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

4 года назад

Человек-Молекула

Присоединяйтесь к нашему Telegram-сообществу

Ответы

Стоит начать с того, что в 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>

3 года назад

Кирилл Шацкий

1 месяц

Основы JavaScript

Синтаксис, основы программирования, переменные, строки, арифметика, условные конструкции, циклы, функции, модули

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

2 месяца

ООП на Javascript

Навык глубокого понимания архитектуры и написания чистого кода, позволяющий решать сложные задачи

1 месяц

СИКП на JS

Навык понимать программы на фундаментальном уровне, уверенно проходить собеседования и решать сложные задачи

8 месяцев

Автоматизатор тестирования на JavaScript

Git, JavaScript, Playwright, бэкенд-тесты, юнит-тесты, API-тесты, UI-тесты, Github Actions, HTTP/HTTPS, API, Docker, SQL

Похожие вопросы