localStorage не сохраняется правильно

#javascript #local-storage

#javascript #локальное хранилище

Вопрос:

Я пытаюсь сохранить элементы проверенного списка в массив и сохранить в localStorage, это отлично работает, если вы проверяете первый элемент в строке по порядку. Но если вы проверите любой другой элемент, кроме первого, скажем, второй или третий элемент, только первый элемент будет сохранен в локальном хранилище. Мне нужно иметь возможность сохранять любой элемент, на который был нажат щелчок, а не всегда позицию [0] элементов списка.

Приведенный ниже код сохраняет все в позицию [0] массива. Таким образом, щелчок по первому элементу будет работать, поскольку он находится в позиции [0], но щелчок по второму элементу также сохраняет позицию [0] вместо позиции [1].

 const savedChecks;
const myArr = [];

savedChecks = document.querySelector('.saved-list-item').innerHTML;
myArr.push(savedChecks);

localStorage.setItem('checkItems'  new Date().getTime(), JSON.stringify(myArr);

Итак, я попробовал это, но этот код дает тот же результат, сохраняет только в позиции [0], но ожидал, что с тех пор, как я добавил [0], но подумал, что, возможно, перебор клавиш отобразит все в позиции [0]:

 localStorage.setItem('checkItems'  new Date().getTime(), JSON.stringify([...myArr][0]);

Я перебираю localStorage и отображаю результат следующим образом:

 for(let i = 0; i < localStorage.length; i  ) {
    if(localStorage !== null) {
        document.querySelector('#savedList').innerHTML  = JSON.parse(localStorage.getItem(localStorage.key(i)));
    }
}

Ответ №1:

Используется querySelectorAll() для получения всех элементов, соответствующих селектору.

 let savedItems = document.querySelectorAll('.saved-list-item');
let myArr = Array.from(savedItems).map(el => el.innerHTML);
localStorage.setItem('checkItems'  new Date().getTime(), JSON.stringify(myArr);

И убедитесь, что селектор соответствует только отмеченным элементам. Вы можете использовать прослушиватели событий для добавления и удаления другого класса для элементов, когда они отмечены и сняты, затем выберите это.

1. Этот код почти выполнил свою работу, он сохраняет правильный отмеченный элемент, но также сохраняет и непроверенные элементы (сохраняет весь список). Я думаю, что это в моем коде html / EJS, я буду работать с ним, чтобы посмотреть, смогу ли я заставить ваш код работать.

Ответ №2:

Прочитав полезные комментарии здесь, я вижу, что я делал неправильно, и вот окончательное решение для решения этой проблемы, если кто-нибудь еще когда-нибудь увидит эту проблему. Я пометил изменения.

 let savedChecks;
let myArr = [];

savedChecks = document.querySelectorAll('.saved-list-item'); /*<--Here use querySelectorAll as stated by others in the comments*/

savedChecks = savedChecks[i].innerHTML; /*<-- Here loop through the savedChecks */

myArr.push(savedChecks);

localStorage.setItem('checkItems'  new Date().getTime(), JSON.stringify(myArr));