单击删除按钮时如何删除localStorage中的项目答案

【问题标题】：How can you delete an item in localStorage when clicking a remove button单击删除按钮时如何删除localStorage中的项目
【发布时间】：2021-06-01 08:45:28
【问题描述】：

我正在尝试构建一个项目，当用户单击删除按钮时，特定项目将被删除。但是每当我尝试制作它时，什么都没有发生，并且该项目没有被删除。

我希望在 removeBooks() 函数中进行此操作，但我无法使其工作。目前，我已经尝试遍历当前 localStorage 的值并拼接索引，这将是特定项目。

然后，我会将 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()

这是 HTML 代码：

<!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>

【问题讨论】：

你试过使用你的调试器吗？在removeBooks中添加断点，按下按钮并单步执行函数。
你能分享这个的HTML代码吗
您正在从data 中删除这本书，但您正在将myLibrary 写入本地存储。那是一个错字。 myLibrary 应该是 data，反之亦然。完全不清楚为什么您甚至对相同的数据有两个不同的变量。您应该从代码中删除 data 或 myLibrary 并坚持使用另一个。
@SureshMangs 已经用 HTML 编辑过

标签： javascript

【解决方案1】：

您应该将项目的索引传递给方法并遍历 localStorage 删除该特定数据并再次在 localStorage 中设置数据。

看看Delete a row in JavaScript。

【讨论】：

【解决方案2】：

这可能是您正在寻找的
localStorage.removeItem('books')

【讨论】：

我认为问题是删除一个节点（索引）。