【发布时间】：2021-03-27 00:53:29
【问题描述】：
我的 localStorage 数组中有很多对象。这些对象具有不同的属性，例如 firstName、lastName 等。每个属性都嵌套在一个 div 中。在我的对象 div 中，也是一个 id=hide 和一个段落“x”的按钮。 我将对象“Person”保存在数组“persons”中。那么我如何通过用户按钮单击（“x”）调用特定对象并将其从 localStorage 中删除？我知道方法 localStorage.removeItem。但我没有获取键和值参数来获取特定对象（通过用户按钮单击该对象的“x”）。 我也知道，如果我为每个对象设置特定的 ID 来调用它。但不是这些按钮和用户点击。
感谢您的支持！ - 当然在我的脚本中还有更多的修复，但首先我需要 removeItem 方法 -
我把我的脚本带到这里。
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>【问题讨论】：
-
请尝试仅在您的问题中发布相关代码。例如，我看不到对您的 CSS（或者可能是您的大部分 HTML）的任何需求。问题越简洁、越有针对性，就越有可能有人回答。
-
你为什么把
localStorage.removeItem()放在JSON.stringify()里面？
标签： javascript html jquery arrays local-storage