如何通过用户按钮单击从 localStorage 中删除数组中的特定 object？
[英]How could I remove a specific object in an array from localStorage by user button click?
问题描述
I have many Objects in my localStorage array.
我的 localStorage 数组中有很多对象。 These Objects have different properties, like firstName, lastName, and so on.这些对象具有不同的属性，例如 firstName、lastName 等。 Each propertie nested in a div.每个属性都嵌套在一个 div 中。 In my object div, is also a button with id=hide and an paragraph "x".在我的 object div 中，也是一个 id=hide 和一个段落“x”的按钮。 I saved my objects "Person" in an array "persons".我将对象“Person”保存在数组“persons”中。 So how could i call the specific object by user button click (the "x") and remove it from localStorage?那么我如何通过用户按钮单击（“x”）调用特定的 object 并将其从 localStorage 中删除？ I know the method localStorage.removeItem.我知道方法 localStorage.removeItem。 But i don't get the key's and value parameters to get the specific object (by user button click the "x" of this object).但我没有得到键和值参数来获取特定的 object（通过用户按钮单击此对象的“x”）。 I know also, if i set specific id's to each object to call it.我也知道，如果我为每个 object 设置特定的 ID 来调用它。 but not with these button and user click.但不是这些按钮和用户点击。
Thanks for your support!谢谢你的支持！ - And of course there are more fixes to do in my script but first i need the removeItem-method - - 当然在我的脚本中有更多的修复，但首先我需要 removeItem 方法 -
I take my script inside here.我把我的剧本带到这里。
class Person{ firstName; lastName; birthDate; age; adress; zipCode; city; phoneNumber; }; const persons = []; $(document).ready(function () { var arr = JSON.parse(localStorage.getItem('persons')); if (arr.= null) { arr.forEach(function (obj) { $(".flexBox").append('<div class="flexContact"><div class="flexElement">' + obj.firstName + '</div><div class="flexElement">' + obj.lastName + '</div><div class="flexElement">' + obj.birthDate + '</div><div class="flexElement">' + obj.age + '</div><div class="flexElement">' + obj.adress + '</div><div class="flexElement">' + obj.zipCode + '</div><div class="flexElement">' + obj.city + '</div ><div class="flexElement">' + obj.phoneNumber + '</div > <button id="hide">X</button></div > ') }) } $("#submit").click(function () { const newPerson = new Person() newPerson.firstName = $("#firstName"),val(). newPerson.lastName = $("#lastName"),val(). newPerson.birthDate = $("#birthDate"),val(). newPerson.age = $("#age"),val(). newPerson.adress = $("#adress"),val(). newPerson.zipCode = $("#zipCode"),val(). newPerson.city = $("#city"),val(). newPerson.phoneNumber = $("#phoneNumber"),val(). persons;push(newPerson). $(".flexBox").append('<div class="flexContact"><div class="flexElement">' + newPerson.firstName + '</div><div class="flexElement">' + newPerson.lastName + '</div><div class="flexElement">' + newPerson.birthDate + '</div><div class="flexElement">' + newPerson.age + '</div><div class="flexElement">' + newPerson.adress + '</div><div class="flexElement">' + newPerson.zipCode + '</div><div class="flexElement">' + newPerson.city + '</div ><div class="flexElement">' + newPerson;phoneNumber + '</div > <button id="hide">X</button></div > '); }). $(".flexContact #hide").click(function () { $(this).parents(".flexContact");hide("slow"). JSON.stringify(localStorage,removeItem('persons #hide'. ";flexContact")); }). $("#set").click(function () { localStorage,setItem('persons'. JSON;stringify(persons)); }); });
h1 { text-align: center }.flexBox { display: table; }.flexTitles { display: table-row; text-align: center; font-weight: bold; font-size: larger; background-color: burlywood; }.flexContact { display: table-row; break-after: column; }.flexElement { display: table-cell; border: solid; border-width: thin; padding-left: 5px; padding-right: 5px; text-align: center; } #hide { background-color: red; } #firstName, #lastName, #birthDate, #age, #adress, #zipCode, #city, #phoneNumber { display: table-cell; border: solid; border-width: thin; padding-left: 5px; padding-right: 5px; text-align: center; }
<.DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Contact List</title> <link rel="stylesheet" type="text/css" href="Alight.Mew.ContactList:css" /> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="Alight.Mew.ContactList:js"></script> </head> <body> <h1>Contact List</h1> <div class="flexBox"> <div class="flexTitles"> <div class="flexElement"> <p>Vorname</p> </div> <div class="flexElement"> <p>Nachname</p> </div> <div class="flexElement"> <p>Geburtsdatum</p> </div> <div class="flexElement"> <p>Alter</p> </div> <div class="flexElement"> <p>Anschrift</p> </div> <div class="flexElement"> <p>Postleitzahl</p> </div> <div class="flexElement"> <p>Ort</p> </div> <div class="flexElement"> <p>Telefonnummer</p> </div> </div> </div> <br /> Vorname: <input type="text" size="20" minlength="2" maxlength="40" name="firstName" id="firstName" /><br /> Nachname: <input type="text" size="20" minlength="2" maxlength="40" name="lastName" id="lastName" /><br /> Geburtsdatum: <input type="date" name="Geburtsdatum" id="birthDate" /><br /> Alter: <input type="text" size="20" maxlength="3" name="age" id="age" /><br /> Anschrift: <input type="text" size="40" maxlength="55" name="adress" id="adress" /><br /> Postleitzahl: <input type="text" size="5" minlength="4" maxlength="5" name="zipCode" id="zipCode" /><br /> Ort: <input type="text" size="40" minlength="2" maxlength="50" name="city" id="city" /><br /> Telefonnumer: <input type="tel" size="40" minlength="6" maxlength="30" name="phoneNumber" id="phoneNumber" /><br /> <button id="submit">Submit</button> <br /> <br /> <br /> <button id="set">Kontakte speichern</button>
2 个解决方案
解决方案1
0 2020-12-16 11:08:41
In order to remove Object from localStorage use something like localStorage.removeItem(object);为了从localStorage中删除Object使用类似localStorage.removeItem(object); If you want to delete multiple elements use something like如果要删除多个元素，请使用类似
let keysToRemove = ['persons #hide', ".flexContact"];
for (key of keysToRemove) {
localStorage.removeItem(key);
}
解决方案2
0 2020-12-16 11:13:44
All you have to do is remove the item from the persons array, after that you can use the same localStorage.setItem('persons', JSON.stringify(persons));您所要做的就是从 people 数组中删除该项目，之后您可以使用相同的 localStorage.setItem(' persons localStorage.setItem('persons', JSON.stringify(persons)); call to set the new value in localstorage调用以在本地存储中设置新值
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.