如何從本地存儲中刪除特定項目（java 腳本）
[英]How to Delete specific item from local storage(java script)
問題描述
當我按下刪除按鈕時，本地存儲不刪除
正如您在下面的JavaSript 代碼中看到的那樣。 我正在嘗試從本地 storege刪除列表。 我認為這是deleteLocal(isbn)函數的問題。 檢查行號(54,85)
Java腳本
class List {
constructor(employee, address, phoneNumber, skils, salary) {
this.employee = employee;
this.address = address;
this.phoneNumber = phoneNumber;
this.skils = skils;
this.salary = salary;
}
}
class Display {
ListAdded(list) {
let BookList = document.getElementById("BookList");
const creat = document.createElement("tr");
creat.innerHTML = `<td>${list.employee}</td>
<td>${list.address}</td>
<td>${list.phoneNumber}</td>
<td>${list.skils}</td>
<td>${list.salary}</td>
<td><a href="#" class="btn btn-danger btn-sm delete">X</a></td>
`;
BookList.appendChild(creat);
}
// delete function
static deleteList(delet) {
if (delet.classList.contains("delete")) {
delet.parentElement.parentElement.remove();
}
}
}
// localStorege
class listStore {
static getLocal() {
let lists;
if (localStorage.getItem("listStore") === null) {
lists = [];
} else {
lists = JSON.parse(localStorage.getItem("listStore"));
}
return lists;
}
static displayList() {
let lists = listStore.getLocal();
lists.forEach(function (list) {
let display = new Display();
// Add list to Display
display.ListAdded(list);
});
}
static addLocal(list) {
let lists = listStore.getLocal();
lists.push(list);
localStorage.setItem("listStore", JSON.stringify(lists));
}
我認為是這個功能有問題，我正在嘗試但沒有發生
// localStorege delete function
static deleteLocal(isbn) {
let lists = listStore.getLocal();
lists.forEach((list, index) => {
if (list.isbn === isbn) {
lists.splice(index, 1);
}
});
localStorage.setItem("listStore", JSON.stringify(lists));
}
}
document.addEventListener("DOMContentLoaded", listStore.displayList());
// submit list
let employform = document.getElementById("employForm");
employform.addEventListener("submit", function (e) {
const employee = document.getElementById("Name").value;
address = document.getElementById("address").value;
phoneNumber = document.getElementById("phoneNumber").value;
skils = document.getElementById("skils").value;
salary = document.getElementById("Salary").value;
let list = new List(employee, address, phoneNumber, skils, salary);
console.log(list);
let display = new Display();
display.ListAdded(list);
listStore.addLocal(list);
e.preventDefault();
});
// delete list
document.getElementById("BookList").addEventListener("click", function (e) {
Display.deleteList(e.target);
也檢查這個
listStore.deleteLocal(e.target.parentElement.previousElementSibling.textContent);
e.preventDefault();
});*
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<title>my Projects</title>
</head>
<body>
<nav
class="navbar navbar-expand-lg navbar-dark bg-blue"
style="background-color: #25d99ec9"
>
<a class="navbar-brand" href="#">Magic Notes</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></a
>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input
class="form-control mr-sm-2"
id="searchTxt"
type="search"
placeholder="search"
aria-label="Search"
/>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">
search
</button>
</form>
</div>
</nav>
<div class="container" id="container">
<h1>Dragon Travel desk</h1>
<form id="employForm">
<div class="form-group">
<label for="name">Employe Name</label>
<input
type="text"
class="form-control"
id="Name"
placeholder="Enter emloyee name"
/>
</div>
<div class="form-group">
<label for="address">Address</label>
<input
type="text"
class="form-control"
id="address"
placeholder="Enter employee address"
/>
</div>
<div class="form-group">
<label for="phoneNumber">Phone Number</label>
<input
type="text"
class="form-control"
id="phoneNumber"
placeholder="Enter employee phone number"
/>
</div>
<div class="form-group">
<label for="skils">Skils</label>
<input
type="text"
class="form-control"
id="skils"
placeholder="Enter employee skils"
/>
</div>
<div class="form-group">
<label for="salary">Salary</label>
<input
type="text"
class="form-control"
id="Salary"
placeholder="Enter employee salary"
/>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" id="submit" class="btn btn-primary">
Add Book
</button>
</div>
</div>
</form>
</div>
<hr />
<div id="table">
<div style="margin-left: 30vw">
<h1>Travelars Forme</h1>
</div>
<table class="table table-striped">
<thead>
<tr>
<th scope="col" style="width: 16vw">Employee Name</th>
<th scope="col" style="width: 16vw">Address</th>
<th scope="col" style="width: 16vw">Phone Number</th>
<th scope="col" style="width: 16vw">Skils</th>
<th scope="col" style="width: 16vw">Salary</th>
</tr>
</thead>
<tbody id="BookList"></tbody>
</table>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
<script src="book.js"></script>
</body>
</html>
**
謝謝
**
2 個解決方案
解決方案1
0 2021-11-15 02:55:48
使用localStorage.removeItem("listStore")從本地存儲中刪除項目。
解決方案2
0 2021-11-15 04:18:56
我沒有看到任何值得注意的問題。 您可以嘗試在 forEach 之前和 forEach 之后添加調試器。 看到的是帶有所需項目的列表數組嗎？ 然后查看forEach調試器之后，是否刪除了數組項。 如果不是，那么用 == 代替 === 嘗試。
從本地存儲中刪除特定項目
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.