javascript - 单击删除按钮时如何删除localStorage中的项目
问题描述
我正在尝试构建一个项目,当用户单击删除按钮时,特定项目将被删除。但是每当我尝试制作它时,什么都没有发生,并且该项目不会被删除。
我希望在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>
解决方案
您应该将项目的索引传递给方法并遍历 localStorage 删除该特定数据并再次在 localStorage 中设置数据。
推荐阅读
- sql-server - 访问为一位用户锁定的旧 SQL Server 2000 数据库
- compiler-construction - 将 MIPS 程序集转换为 RISCV 程序集
- java - 其他语言的 Cucumber lambdas
- r - RMarkdown - 单词输出 - 正确显示表格
- splunk - 如何在 splunk UI 中屏蔽日志文件中的秘密值?
- php - 使用 json 与 highcharts symfony 绘制图形
- java - 使用 Hibernate NamedNativeQuery,我如何绑定这些参数: WHERE (p1, p2) IN ((v1_1, v1_2), (v2_1, v2_2))
- symfony - 如何使您的 Drupal 8 响应可被浏览器缓存?
- python - 如何编写具有两种可能性的 IF 语句
- c++ - 使用 midl 编译器为 microsoft word 生成 C++ com 接口