HTML5 本地存储 - 多个删除项问题

HTML5 Local Storage - multiple removeItem issue

本文关键字：删除 问题 存储 HTML5      更新时间：2023-09-26

我正在摆弄HTML5本地存储(以前没有太多机会玩它(，我想我会做一些笔记记录器之类的事情。

我有一个函数可以读取本地存储中的内容并将其显示在页面上，在您尝试删除多个条目之前，该功能工作正常。 

function renderNotes() {
    $(currentNotes).html('');
    Object.keys(localStorage);
    Object.keys(localStorage).length;
    $.each(localStorage, function(key, value){
        $(currentNotes).append('<div class="note"><div class="noteHeader"><p class="noteName">' + key + '</p></div><div class="noteContent"><p>' + value + '</p></div></div>');
    });
    alert('notes rendered');
}

转到 JSFiddle： http://jsfiddle.net/AThomas92/MSxQ9/3/并尝试通过单击表单下方的粗体标题删除一些条目 - 第一次它工作正常，但之后它根本不起作用。

奇怪的是，当您添加新注释时也会调用该函数，并且它会一遍又一遍地工作。

有什么想法吗？

提前感谢，

灰

由于元素是动态重新呈现的，因此需要使用事件委派

// DELETE NOTE
$(document).on('click', '.noteName', function(){
    var noteName = $(this).html();
    localStorage.removeItem(noteName);
    renderNotes();
});

演示：小提琴

除了 Arun P Johny 的回答之外，这里有一个使用 jquery 的提示：

而不是像下面这样使用 jquery 对象：

  var saveBtn = $('#saveBtn');
  $(saveBtn).click(function(){
    // Code
  });

像这样使用它：

  var saveBtn = $('#saveBtn');
  saveBtn.click(function(){
    // Code
  });

甚至更好(记住它是一个jquery对象(： 

  var $saveBtn = $('#saveBtn');
  $saveBtn.click(function(){
    // Code
  });
相关文章：