如何使用委派从本地存储中删除项目？
[英]How do i delete item from local storage with delegation?
问题描述
我正在尝试制作一个书签应用程序，其中当我单击提交按钮时，当我键入网站的名称和地址时，它们应显示在表单下方。此外，当我单击删除按钮时，它不仅应从UI中删除项目，还应从中删除项目这是问题所在。我从UI删除它们没有问题，但是当我重新加载页面时，它们一直显示。我知道这很复杂，但是如果有人感兴趣，我会敦促他们注意存储类与存储特别是deleteBookmarkFromStorage（）方法。
document.getElementById("myForm").addEventListener("submit", saveBookmark); document.querySelector(".col-lg-12").addEventListener("click", function(e) { const ui = new UI(); ui.deleteItem(e.target); Store.deleteBookmarkFromStorage(e.target.parentElement); ui.showAlert("You deleted a bookmark", "alert alert-success"); e.preventDefault(); }); class Bookmark { constructor(siteName, siteUrl) { this.siteName = siteName; this.siteUrl = siteUrl; } } class UI { constructor() { this.siteName = document.getElementById("siteName"); this.siteUrl = document.getElementById("siteUrl"); this.bookmarksResults = document.getElementById("bookmarksResults"); } showAlert(message, className) { const div = document.createElement("div"); div.appendChild(document.createTextNode(message)); div.className = className; const container = document.querySelector(".container"); const bookmarkCard = document.getElementById("bookmarkCard"); container.insertBefore(div, bookmarkCard); setTimeout(() => { document.querySelector(".alert").remove(); }, 3000); } showBookmark(bookmark) { const div = document.createElement("div"); div.className = "card-body"; div.innerHTML = ` <h3 class="inline-block">${bookmark.siteName}</h3> <a class="btn btn-primary" target="_blank" href=${bookmark.siteUrl}>Visit</a> <a class="btn btn-danger" href="#">Delete</a> `; const results = this.bookmarksResults; results.appendChild(div); } clearInput() { this.siteName.value = ""; this.siteUrl.value = ""; } deleteItem(target) { if (target.className === "btn btn-danger") { target.parentElement.remove(); } } } class Store { static getBookmarks() { let bookmarks; if (localStorage.getItem("bookmarks") === null) { bookmarks = []; } else { bookmarks = JSON.parse(localStorage.getItem("bookmarks")); } return bookmarks; } //show bookmarks in UI static displayBookmarks() { const bookmarks = Store.getBookmarks(); bookmarks.forEach(function(bookmark) { const ui = new UI(); ui.showBookmark(bookmark); }); } //Add bookmark to storage static addBookmarkToStorage(bookmark) { const bookmarks = Store.getBookmarks(); bookmarks.push(bookmark); localStorage.setItem("bookmarks", JSON.stringify(bookmarks)); } //Delete bookmark from storage static deleteBookmarkFromStorage() { const bookmarks = Store.getBookmarks(); bookmarks.forEach(function(bookmark) { if (bookmark.className === "btn btn-danger") { bookmarks.splice(index, 1); } }); localStorage.setItem("bookmarks", JSON.stringify(bookmarks)); } } document.addEventListener("DOMContentLoaded", Store.displayBookmarks); function saveBookmark(e) { const siteName = document.getElementById("siteName").value; const siteUrl = document.getElementById("siteUrl").value; const bookmark = new Bookmark(siteName, siteUrl); const ui = new UI(); if (siteName === "" || siteUrl === "") { ui.showAlert("Please fill in all the fields", "alert alert-danger"); } else { ui.showBookmark(bookmark); Store.addBookmarkToStorage(bookmark); ui.showAlert("You added a new bookmark", "alert alert-success"); ui.clearInput(); } e.preventDefault(); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>My JavaScript App</title> <!--Bootstrap--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" /> </head> <body> <div class="container"> <h3 class="mt-3 mb-3 text-muted">Bookmarker</h3> <hr /> <div class="card card-body pt-5 pb-5 mb-3" id="bookmarkCard"> <h2>Bookmark Your Favorite Sites</h2> <form id="myForm"> <div class="form-group"> <label>Site Name</label> <input type="text" class="form-control" id="siteName" placeholder="Website Name" /> </div> <div class="form-group"> <label>Site URL</label> <input type="text" class="form-control" id="siteUrl" placeholder="Website URL" /> </div> <button type="submit" class="btn btn-primary " id="submitButton"> Submit </button> </form> </div> <div class="row marketing"> <div class="col-lg-12"> <div id="bookmarksResults"></div> </div> </div> <footer class="footer"> <p>© 2019 Bookmarker, Inc.</p> </footer> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous" ></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous" ></script> <script src="build/app.bundle.js"></script> </body> </html>
在此处输入图片描述 eteBookmarkFromStorage（）方法。
2 个解决方案
解决方案1
0 2019-02-27 15:47:16
您可以尝试从本地存储中删除所有内容，然后再写回更新的对象：
localStorage.clear();
另外，查看它如何与sessionStorage 。
解决方案2
0 2019-02-28 14:44:47
我解决了
//event listener Store.deleteBookmarkFromStorage( e.target.previousElementSibling.previousElementSibling.textContent ); //Class Store static deleteBookmarkFromStorage(siteName) { const bookmarks = Store.getBookmarks(); bookmarks.forEach(function(bookmark, index) { if (bookmark.siteName === siteName) { bookmarks.splice(index, 1); } }); localStorage.setItem("bookmarks", JSON.stringify(bookmarks)); }
我如何获得删除按钮以从本地存储中删除单个项目
[英]how can i get get the delete button to remove a single item from local storage
如何使用chrome.storage.sync.remove从数组中删除一项？
[英]How do I delete one item from an array with chrome.storage.sync.remove?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.