как хранить несколько значений в одном ключе localStorage
У меня есть переменная note, которая является основным элементом для заметки, содержащая в себе дочерние элементы.
var note = document.createElement("div");
Мне надо добавленные заметки хранить и отображать на странице при перезагрузке или выходе из браузера. Я решил сперва взять содержимое заметки
var html = note.outerHTML;
Затем сохраняю все в localStorage и вывожу в консоль
localStorage.setItem('save_note', html);
var storage = localStorage.getItem('save_note');
console.log(storage);
Работает нормально первый раз, но добавляя следующие, в хранилище присутствует только последняя добавленная заметка. Еще я не понимаю, как сохраненные заметки показывать при перезагрузки страницы.
Ответы (1 шт):
Храните это в виде массива. Т.е. делайте массив, где будут содержатся заметки. При необходимости добавить - добавляйте в массив и делайте JSON.stringify и кладите эту строку в localStorage. При извлечении данных из хранилища делайте JSON.parse обратно в массив и работайте с ним.
P.S. Я бы рекомендовал вообще сохранять и извлекать только данные по заметкам, а не сами html. А уже на основе данных из массива - восстанавливать html разметку.