Как в localstorage вывести больше одной записи?

Question

[Diana_43]

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

function createTodoApp(key) {
// сохраняю запись
localStorage.setItem(key, JSON.stringify(todoItemForm.input.value));

//вывожу 
if (localStorage.getItem(key) !== null) {
            
            for(var i = 0; i < localStorage.length; i++) {
                let key1 = localStorage.key(i);
                let key2 = createTodoItem(JSON.parse(localStorage.getItem(key1)));
                todoList.append(key2.item)
                key2.doneButton.addEventListener('click', function(){
                    key2.item.classList.toggle('list-group-item-success')
                })
                key2.deleteButton.addEventListener('click', function(){
                    if(confirm('Вы уверены?')){
                        localStorage.removeItem(key1);
                        key2.item.remove();
                    }
                })
            }
          }
}

В качестве ключа передаю просто 'mykeys'.

Answer 1

[Сергей Соколов]

держать тудусы в массиве.

Сохранять массив (JSON-сериализованный).

const lsKey = 'todo items';

// в самом начале посмотреть, есть ли сохранённые данные?
const data = JSON.parse(localStorage.getItem(lsKey)) || [];

// добавление нового
const item = { id: 123, name: 'aaa', title: 'bbb' };
data.push(item);
localStorage.setItem(lsKey, JSON.stringify(data));

Comments

[Diana_43]

Сделала, как вы написали). Сейчас записи сохраняются в виде массива с объектами. Мне не совсем понятно, как выводить их с помощью цикла. Выводится весь массив целиком, а не каждый объект отдельно.

[Петр]

Diana_43, а потом, что бы вывести их как из JSON, считать строку из LS через JSON.parse уже получить обратно валидный JSON, в цикле пробежаться и вывести на экран, что требуется.