在本地存储中添加和删除数组，然后以某种方式检索单个数组项？

Question

我正在开发一个用户可以添加和删除书籍的图书馆。这需要本地存储。我已成功将库添加到本地存储，但我不知道如何访问和修改各个本地存储阵列项。

我有一个功能可以将新书添加到图书馆，然后将图书馆发送到本地存储：

    const addBook = (e) => {
    e.preventDefault();
    let newBook = createBook();
    updateLibrary(newBook);

    newBook = `${newBook.title}`;
    console.log(newBook);

    localStorage.setItem('library', JSON.stringify(theLibrary));
    
    newBookForm.style.display = 'none';

    
}

然后，我将要显示给用户的库设置为本地存储的库：

// Displays the library on cards
function showLib() {
    for (let i = 0; i < theLibrary.length; i++) {
            
            if (localStorage.length > 0) {
                let library = JSON.parse(localStorage.getItem('library'));

                theLibrary = library;

            }

现在，一切正常，但我不知道如何从本地存储中的数组中删除特定项目。这是我在删除按钮点击功能中尝试的解决方案：

toggleRemove.onclick = function(e) {
                console.log(e.target.parentNode);
                deleteThis = e.target.parentNode;

                for (i = 0; i < theLibrary.length; i++) {
                    let library = JSON.parse(localStorage.getItem('library'));
                    console.log(library[i]);
                    let newLibrary = library.splice(i, 1);
                    localStorage.setItem('remove', JSON.stringify(newLibrary));

                    localStorage.removeItem(newLibrary);

                }

                
                deleteThis.remove();
                removeBook(deleteThis);
                }

我在这里用头撞墙。我似乎无法瞄准我想要的项目。感谢任何帮助！

Answer 1

最好不要尝试直接从本地存储中删除项目。您可以为此遵循不可变状态流程。

按照以下步骤操作：

像在第一个片段中所做的那样，使用库数组设置本地存储 localStorage.setItem('library', JSON.stringify(theLibrary));
然后在您的更新功能上首先从本地存储中检索库数据。 let library = JSON.parse(localStorage.getItem('library'));
现在假设您要使用 splice 方法从数组中删除 i 索引。 library = library.splice(i, 1);（存储在同一个变量中，不需要新的变量）。
现在在本地存储中将这个更新后的库设置在与之前相同的键中。 localStorage.setItem('library', JSON.stringify(library));
现在您可以从相同的 showLib 函数中消费方式 let library = JSON.parse(localStorage.getItem('library'));

在本地存储中添加和删除数组，然后以某种方式检索单个数组项？

Adding and removing an array to local storage, then retrieving the individual array items somehow?

html

javascript

arrays

loops

local-storage