Question

我正在使用此Codepen https://codepen.io/anon/pen/jJXmpZ，但是我正在努力为每个音符实现一个新的删除按钮。

我已经在html中添加了它：

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

然后我将此功能添加到了脚本中

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

但是，似乎我做错了什么，删除按钮没有响应。

我们非常感谢您的帮助。

Codepen

Answer 1

首先要指出的是，单击该函数时实际上从未调用过该函数。

Answer 2

像这样调用delete函数： <input id="delNote" value=" delete note" type="button" onClick="deleteNote(XXXX);"/>

其中XXXX是您的笔记，或者您指的是笔记（我想带有某种ID）

Answer 3

您是

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

note.length是输入表单的长度，不是唯一变量，也不是顺序的。

在开发人员工具的console.log中键入localStorage，以查看localStorage中的内容。

并尝试使用

删除

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

笔记不是键，'note _'+ note.length 是。

每次两个音符的长度相同时，最后一个音符将删除/替换第一个音符，并且您没有列出要删除的音符的键列表。我建议通过每次创建音符时进行计数并将计数用作键来设置或创建键索引。

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.length

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

和

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

但是，如果将注释以外的任何内容放置在localStorage中，则假设逻辑将破坏deleteNote（localStorage.length）

无论哪种方式，您都可以在笔记的右上角放置一个X来调用deleteNote（key），但仍然需要更新显示循环。

因此。

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

从X调用

：

deleteNote(key);

从本地存储删除注释

3 个答案: