我正在尝试构建一个项目，当用户单击删除按钮时，特定项目将被删除。但每当我尝试制作它时，什么也没有发生，并且该项目也不会被删除。
我希望在
removeBooks()然后，我将 localStorage 项目设置为新项目并删除项目。所有这些都需要在单击删除按钮时发生，但这不起作用，因为该按钮不执行任何操作。控制台中也没有记录任何错误。
如果有人可以帮助我理解我在这个逻辑中哪里出了问题，并帮助我找到一种方法来做到这一点，我将非常感激。
let myLibrary = JSON.parse(localStorage.getItem('books')) || [];
// We push the values to our array and printed. If there is nothing, we print an empty array, otherwise we get our localStorge data.
const addBook = (event) => {
// We create the fields so that we can fill our array.
var fields = {
title: document.getElementById("title").value,
author: document.getElementById("author").value,
pages: document.getElementById("pages").value,
checkbox: document.getElementById("checkbox").checked
};
myLibrary.push(fields)
renderBooks()
}
function renderBooks() {
localStorage.setItem('books', JSON.stringify(myLibrary))
const data = JSON.parse(localStorage.getItem('books'))
//We map through the array and print the necessary data to our HTML so that the client can see it.
document.getElementById('bookList').innerHTML = data.map(item => {
return `<div>
<div>Title: ${item.title}</div>
<div>Author: ${item.author}</div>
<div>Pages: ${item.pages}</div>
<div>${item.checkbox === true ? "Read" : "Not Read"}</div>
<button onclick="removeBooks()">Remove</button>
</div>`
}).join('')
// If there is no form, we want to display it, otherwise we just don't have the form displayed.
var x = document.getElementById("demo");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
// Here I want to make the remove function but not with much luck.
function removeBooks() {
const data = JSON.parse(localStorage.getItem('books'))
for (var index = 0; index < data.length; index++) {
data.splice(index, 1);
}
localStorage.setItem('books', JSON.stringify(myLibrary))
}
console.log(myLibrary)
renderBooks()<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.6.0.js">
</script>
</head>
<body>
<button onclick="renderBooks()">New Book</button>
<br><br>
<div id="demo">
<table width="230px" align="center" style="box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 100);">
<tr>
<td>
<label for="title">Title</label>
<input name="title" id="title" />
<a href="#" class="close-classic"></a>
</td>
</tr>
<tr>
<td>
<label for="title">Author</label>
<input name="author" id="author" />
<a href="#" class="close-classic"></a>
</td>
</tr>
<tr>
<td>
<label for="title">Pages</label>
<input name="pages" id="pages" />
<label for="title">Read</label>
<input type="checkbox" name="checkbox" id="checkbox" />
<a href="#" class="close-classic"></a>
<button onclick="addBook(event)">Submit</button>
<button onclick="renderBooks()">close</button>
</td>
</tr>
</table>
</div>
<div id="bookList"></div>
<script src="../JS/script.js"></script>
</body>
</html>您应该将项目的索引传递给该方法并循环遍历 localStorage 删除该特定数据，然后再次在 localStorage 中设置数据。
我认为 localStorage.removeItem('books') 正在删除整个 books 节点列表， const bookIndex = books.findIndex((book) => book.id === bookId); 你可以尝试的是使用 array.find 方法 & IndexOf ， book.id ，然后你 books.splice (index,1);
这可能就是您正在寻找的
localStorage.removeItem('books')