Question

我刚开始在javascript中学习localstorage，所以我正在研究一个项目来练习。我的程序是书签管理器。用户可以输入网页的名称和网址，然后将其存储并预先添加到div。如果用户点击垃圾桶图标，我想找到与该垃圾箱图标相关联的网址链接，然后将其从localstorage中删除。

这是代码和演示的链接。 LINK

JS

// READY
$(document).ready(() => {
    // when user clicks on submit
    $(".submit").on("click", addItem);
    // when user clicks on delete
    $(".fa-trash").on("click", deleteItem);

    // show bookmarks
    showBookmarks();
})

// ADD ITEM
let addItem = (e) => {
    // get values from inputs
    let name = $(".name").val();
    let link = $(".url").val();

    // stores bookmarks
    let bookmark = {
        name: name,
        url: link
    };

    // bookmark varification
    // if theres nothing in bookmarks
    if(localStorage.getItem("bookmarks") == null) {
        // init array
        let bookmarks = [];

        // add to array
        bookmarks.push(bookmark);

        // set to local storage
        localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
    } else { // if theres something in bookmarks
        // get from local storage
        let bookmarks = JSON.parse(localStorage.getItem("bookmarks"));

        // add bookmark to array
        bookmarks.push(bookmark);

        // reset back to local storage
        localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
    }
}

// SHOW BOOKMARKS
let showBookmarks = () => {
    // get from local storage
    let bookmarks = JSON.parse(localStorage.getItem("bookmarks"));

    // loop through local storage data
    for(let i = 0; i < bookmarks.length; i++) {
        let name = bookmarks[i].name;
        let url = bookmarks[i].url;

        // append bookmarks
        $(".show").prepend(`
            <div class="bookmark">
                <a href="${url}" target="_blank">${name}</a>
                <i class="fa fa-trash fa-lg" aria-hidden="true"></i>
            </div>
        `);
    }
}

// DELETE ITEM
let deleteItem = (url) => {
    // get bookmarks from localstorage
    let bookmarks = JSON.parse(localStorage.getItem("bookmarks"));

    // loop through bookmarks
    for(let i = 0; i < bookmarks.length; i++) {
        if(bookmarks[i].url == url) {
            // remove from array
            bookmarks.splice(i, 1);
        }
    }

    // reset local storage
    localStorage.setItem("bookmarks", JSON.stringify(bookmarks));

    showBookmarks();
}

Answer 1

$（“。fa-trash”）。on（“click”，deleteItem）;

应该是

$（document）.on（“click”，“。fa-fresh”，deleteItem）;

Answer 2

使用此localStorage.removeItem（key）;

Answer 3

您正在使用该方法进行存储，而不是用于删除。您的代码应该像

localStorage.removeItem("bookmarks");

您可以找到更多信息here

Answer 4

你永远不会传递网址，但你可以从这样的事件对象派生它：

let deleteItem = (event) => {
    // get bookmarks from localstorage
var a = $(event.target).siblings("a");
var url = $(a).attr("href");        
let bookmarks = JSON.parse(localStorage.getItem("bookmarks"));

// loop through bookmarks
for(let i = 0; i < bookmarks.length; i++) {
    if(bookmarks[i].url == url) {
        // remove from array
        console.log("removing i");
        bookmarks.splice(i, 1);
    }
}

// reset local storage
localStorage.setItem("bookmarks", JSON.stringify(bookmarks));

showBookmarks();

}

Answer 5

我遇到一个问题，其中localStorage.removeItem('myItem');并未真正删除该项目。我发现如果我添加 window.在实际解决问题之前： window.localStorage.removeItem('myItem');

无法从Localstorage中删除项目 - JavaScript

5 个答案: