Как сделать 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
Основы Frontend за 14 дней
  • 72 урока в онлайн-тренажере
  • 4 живых вебинара и масскодинг
  • Помощь наставника на весь период обучения

Есть что добавить? Зарегистрируйтесь

или войдите в аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Курсы по программированию в Хекслете

Backend-разработка

Разработка серверной части сайтов и веб-приложений

Frontend-разработка

Разработка внешнего интерфейса сайтов и веб-приложений и верстка

Создание сайтов

Разработка сайтов и веб-приложений на JS, Python, Java, PHP и Ruby on Rails

Тестирование

Ручное тестирование и автоматизированное тестирование на JS, Python, Java и PHP

Аналитика данных

Сбор, анализ и интерпретация данных на Python

Интенсивные курсы

Интенсивное обучение для продолжающих

DevOps

Автоматизация настройки локального окружения и серверов, развертывания и деплоя

Веб-разработка

Разработка, верстка и деплой сайтов и веб-приложений, трудоустройство для разработчиков

Математика для программистов

Обучение разделам математики, которые будут полезны при изучении программирования

JavaScript

Разработка сайтов и веб-приложений и автоматизированное тестирование на JS

Python

Веб-разработка, автоматическое тестирование и аналитика данных на Python

Java

Веб-разработка и автоматическое тестирование на Java

PHP

Веб-разработка и автоматическое тестирование на PHP

Ruby

Разработка сайтов и веб-приложений на Ruby on Rails

Go

Курсы по веб-разработке на языке Go

HTML

Современная верстка с помощью HTML и CSS

SQL

Проектирование базы данных, выполнение SQL-запросов и изучение реляционных СУБД

Git

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