удалить заметку из localstorage

#javascript #local-storage

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

Вопрос:

Я использую этот codepen https://codepen.io/anon/pen/jJXmpZ но я изо всех сил пытаюсь реализовать новую кнопку удаления для каждой заметки.

Я добавил это в свой html:

 <input id="delNote" value=" delete note" type="button" />

И я добавил эту функцию в скрипт

 function deleteNote(note) {
    localStorage.removeItem(note);
}

Однако, похоже, я делаю что-то не так, кнопка удаления не отвечает.

Любая помощь высоко ценится.

Codepen

1. У меня работает codepen.

2. Я не говорил, что это не работает, я говорю, что у него нет способа удалить одну заметку, просто очистить localStorage. Я пытаюсь реализовать этот метод.

3. Затем вам следует обновить свой codepen, чтобы включить кнопку, о которой вы говорите, не работает

4. Проверьте codepen, он обновлен.

5. Вы не отправляете заметку в функцию удаления, передается только событие.

Ответ №1:

первое, что бросается в глаза, это то, что вы на самом деле никогда не вызываете функцию, когда нажимаете на нее.

Ответ №2:

Вызовите функцию удаления следующим образом: <input id="delNote" value=" delete note" type="button" onClick="deleteNote(XXXX);"/>

где XXXX — это ваша заметка, или как бы вы ни ссылались на свою заметку (я предполагаю, с каким-то идентификатором)

Ответ №3:

Вы

 localStorage.setItem('note_' note.length, note);

примечание.длина, являющаяся длиной формы ввода, не является уникальной переменной и не является последовательной.

Введите localStorage в консоли.войдите в инструменты разработчика, чтобы просмотреть, что находится в localStorage.

И пытается удалить с

 localStorage.removeItem(note); // note is an object object not a key.

заметка не является ключом ‘note_’ примечание.длина равна.

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

 localStorage.count

Затем вы можете добавить в

 if (localStorage.count) {
   localStorage.count = localStorage.count 1
   } else {
   localstorage.count = 1; // no notes begin at 1.
   }
localStorage.setItem('note_' localStorage.count, note);

и удалите последнюю заметку

 if (localStorage.count) {
   localStorage.removeItem('note_' localStorage.count);
   localStorage.count = localStorage.count-1
   } else {
      // no notes localStorage count is zero or undefined? same difference here.
   }

Вам также потребуется обновить цикл отображения, поскольку он отображает все localStorage в виде заметки.

Или вы могли бы использовать localStorage.длина,

 localStorage.setItem('note_' localStorage.length, note);

 localStorage.removeItem('note_' localStorage.length);

Но если в localStorage помещено что-либо, кроме заметки, логика предположения нарушается deleteNote(localStorage.длина)

В любом случае вы могли бы поместить крестик в правом верхнем углу заметки, чтобы вызвать deleteNote (ключ), но все равно необходимо обновить цикл отображения.

Таким образом.

 function deleteNote(note) {
        localStorage.removeItem(note);
    }

вызывается из X с:

 deleteNote(key);