如何通过事件委托删除LocalStorage书签项？修复刷新后数据重现问题

你遇到的问题确实出在Store.deleteBookmarkFromStorage()方法里，这个方法的逻辑完全没有正确实现从LocalStorage中移除书签的功能，我来一步步帮你修正：

核心问题分析 #

原来的deleteBookmarkFromStorage方法有三个致命错误：

1. 没有接收参数：你调用方法时传了e.target.parentElement，但方法内部根本没用到这个参数，不知道要删除哪条书签
2. 错误的判断条件：循环里判断bookmark.className === "btn btn-danger"，但这里的bookmark是从LocalStorage读取的数据对象，不是DOM元素，根本没有className属性，所以这个判断永远不成立，不会执行删除操作
3. 未定义的变量：就算判断通过，splice(index, 1)里的index也没有定义，会直接报错

修正步骤 #

1. 给删除按钮添加标识属性 #

首先修改UI.showBookmark方法，在删除按钮上添加data-url属性，把对应书签的网址存进去，这样删除时能准确找到要移除的书签：

showBookmark(bookmark) {
    const div = document.createElement("div");
    div.className = "card-body";
    // 给Delete按钮添加data-url属性，存储书签的网址
    div.innerHTML = `
        <h3 class="inline-block">${bookmark.siteName}</h3>
        <a class="btn btn-primary" target="_blank" href=${bookmark.siteUrl}>Visit</a>
        <a class="btn btn-danger" href="#" data-url="${bookmark.siteUrl}">Delete</a>
    `;
    const results = this.bookmarksResults;
    results.appendChild(div);
}

2. 修改点击事件，传递正确的删除标识 #

调整点击事件的处理逻辑，先判断点击的是删除按钮，再获取对应的书签网址，传给删除方法：

document.querySelector(".col-lg-12").addEventListener("click", function(e) {
    const ui = new UI();
    // 先确认点击的是删除按钮
    if (e.target.className === "btn btn-danger") {
        // 获取按钮上存储的书签网址
        const targetUrl = e.target.getAttribute('data-url');
        ui.deleteItem(e.target);
        // 把网址传给存储删除方法
        Store.deleteBookmarkFromStorage(targetUrl);
        ui.showAlert("You deleted a bookmark", "alert alert-success");
    }
    e.preventDefault();
});

3. 重写deleteBookmarkFromStorage方法 #

现在修改存储类的删除方法，接收书签网址作为参数，过滤掉LocalStorage中对应的书签：

static deleteBookmarkFromStorage(bookmarkUrl) {
    let bookmarks = Store.getBookmarks();
    // 过滤掉与目标网址匹配的书签
    bookmarks = bookmarks.filter(bookmark => bookmark.siteUrl !== bookmarkUrl);
    // 也可以用forEach+splice的方式：
    // bookmarks.forEach((bookmark, index) => {
    //     if (bookmark.siteUrl === bookmarkUrl) {
    //         bookmarks.splice(index, 1);
    //     }
    // });
    // 更新LocalStorage
    localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
}

为什么这样能解决问题？ #

现在删除流程变成了：

1. 点击删除按钮时，从按钮的data-url拿到对应书签的网址
2. 调用存储方法时把这个网址传进去
3. 存储方法从LocalStorage读取数组，过滤掉匹配网址的书签，再把更新后的数组存回LocalStorage

这样刷新页面时，Store.displayBookmarks()读取的就是已经删除后的数组，不会再出现已删除的书签了。

内容的提问来源于stack exchange，提问作者Ivan