Javascript 似乎我的localstorage中只有一个键，它一直将所有值存储在其中（localstorage）

嘿，我正在尝试制作一个电话簿，每次我添加某人的姓名和电话号码时，它都会显示在首页，然后我可以删除或编辑。。。 现在我尝试添加一个remove函数，以便在多次尝试后只删除我选择的一行或名称（在inspect中，开发者工具）只有一个键，并且似乎我正在将所有数组（值）存储到其中，现在，如果我只想从键中删除一个值，我不确定这是否可能呢 也许我必须这样做，所以我有多个键，每个键都有自己的值，我不确定

这是我的js代码

"use strict";

function showOverlay(showButton, showContainer) { // this whole funciton opens up the overlay
  const addButton = document.querySelector("." + showButton);
  addButton.addEventListener("click", function addSomthing() {
    document.querySelector("." + showContainer).style.display = 'block';
  });
} //end of function

showOverlay("addBtn", "formContainer");


function cancelOverlay(cancelButton, showContainer) { //this dynamic funciton helps with closing overlays after we are done with the event
  const removeOverlay = document.querySelector("." + cancelButton);
  removeOverlay.addEventListener("click", function removeSomthing() {
    document.querySelector("." + showContainer).style.display = 'none';
  });
} //end of function
cancelOverlay("cancelOverlay", "formContainer");
//

let phoneArray = [];
window.onload = init;

const submitButton = document.getElementById("submitButton"); 
submitButton.addEventListener("click", function addPerson() {
    const person = {
      name: document.getElementById("name").value,
      phoneNumber: document.getElementById("phone").value
    };
    if (person.name != "" && person.phoneNumber != "") {
      phoneArray = JSON.parse(localStorage.getItem("person")) || [];
      phoneArray.push(person);
      localStorage.setItem("person", JSON.stringify(phoneArray));
      phoneArray = localStorage.getItem("person");
      phoneArray = JSON.parse(phoneArray);

      window.location.reload(true);
    } //end if
  } //end addPerson)
);

function createLayout(person) {

  const divv = document.getElementById("outPutContainer");
  let row = document.createElement("ul");
  row.innerHTML = `
<li>${person.name} </li>
<li>${person.phoneNumber} </li>
<button class="insideRemoveBtn"> - </button>
`;
  divv.appendChild(row);
} //end of function


function getPersonArray() {
  return JSON.parse(localStorage.getItem("person"));
} //end of function

function init() {
  const personArray = getPersonArray();
  for (let i = 0; i < personArray.length; i++) {
    const person = personArray[i];
    createLayout(person);
    const insideRemoveBtn = document.querySelector(".insideRemoveBtn");
    insideRemoveBtn.addEventListener("click", function removeSingleItem() {
      localStorage.removeItem('person');
      location.reload(true);
    });
  }
} //end of function

const removeAllBtn = document.getElementById("removeAllBtn");
removeAllBtn.addEventListener("click", function removeAll() {
  localStorage.clear();
  location.reload(true);
});

“严格使用”；
函数showOverlay（showButton，showContainer）{//整个函数打开了覆盖
const addButton=document.querySelector（“.”+showButton）；
addButton.addEventListener（“单击”，函数addSomthing（）{
document.querySelector（“.”+showContainer）.style.display='block'；
});
}//函数结束
showOverlay（“addBtn”、“formContainer”）；
函数cancelOverlay（cancelButton，showContainer）{//此动态函数有助于在完成事件后关闭覆盖
const removeOverlay=document.querySelector（“.”+取消按钮）；
addEventListener（“单击”，函数removeSomthing（））{
document.querySelector（“.”+showContainer）.style.display='none'；
});
}//函数结束
cancelOverlay（“cancelOverlay”、“formContainer”）；
//
让phoneArray=[]；
window.onload=init；
const submitButton=document.getElementById（“submitButton”）；
addEventListener（“单击”，函数addPerson（））{
const person={
名称：document.getElementById（“名称”）.value，
电话号码：document.getElementById（“电话”）.value
};
if（person.name！=“”&person.phoneNumber！=“”）{
phoneArray=JSON.parse（localStorage.getItem（“person”））| |[]；
phoneArray.push（个人）；
setItem（“person”，JSON.stringify（phoneArray））；
phoneArray=localStorage.getItem（“person”）；
phoneArray=JSON.parse（phoneArray）；
window.location.reload（true）；
}//如果结束，则结束
}//end addPerson）
);
功能createLayout（个人）{
const divv=document.getElementById（“outPutContainer”）；
让行=document.createElement（“ul”）；
row.innerHTML=`
${person.name}
${person.phoneNumber}
- 
`;
第五节附属物（世界其他地区）；
}//函数结束
函数getPersonArray（）{
返回JSON.parse（localStorage.getItem（“person”）；
}//函数结束
函数init（）{
const personArray=getPersonArray（）；
for（设i=0；i

如果需要，这是我的html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PhoneBook</title>
    <link rel="stylesheet" href="Css/Whole.css">
    <script defer src="JavaScript/PU.js"></script>
</head>

<body>
    <h1>PhoneBook</h1>


    <div class="childContainer">


        <div class="buttonsContainer">
            <div>
                <input type="search" placeholder="search" class="searchBar"></div>
            <div class="buttonsRightSide"> <button value="submit" id="addBtn" class="addBtn">+</button>
                <button value="submit" id="removeAllBtn" class="removeAllBtn">-</button>
                <button value="submit" id="saveBtn" class="saveBtn">*</button></div>
        </div>



        <div class="formContainer">
            <form class="addForm" id="addForm">

                <h2>Create Contact</h2>
                <label for="name">First name*:</label>
                <input id="name" type="text" pattern="[A-Z][a-zA-Z]{3,7}" required><br>
                <label for="phoneNumber">Phone number*:</label>
                <input id="phone" type="number" pattern="[0][5][0-8][ -]?\d{7}" required><br>
                <label for="Adress">Address:</label>
                <input type="text" id="Address"><br>
                <label for="Email">Email:</label>
                <input type="email" id="Email"><br>
                <label for="Description">Description:</label>
                <textarea type="text" id="Description"></textarea><br>
                <div class="sendCancelButtons">
                    <button type="submit" class="submitButton" id="submitButton">Send</button>
                     <button value="submit" class="cancelOverlay">Cancel</button></div>
            </form>
        </div>


        <div id="outPutContainer" class="outPutContainer">


        </div>


    </div>

</body>

</html>

通信录
通信录
+
-
*
建立联系
姓名*：


电话号码*：


地址:


电邮：


说明：


发送
取消

---

欢迎提供任何提示和建议，并提前感谢根据我从您的问题中了解到的情况，您正在将所有电话簿数据存储在

person

键中。要从

localStorage

中删除任何特定的“person”，可以再次解析数组，然后从数组中删除该“person”，并将其保存回

localStorage

。我假设你想通过电话号码删除此人

函数removeByPhoneNumber（phoneNumber）{
const prevArray=JSON.parse（localStorage.getItem（“person”））| |[]；
const newArray=prevArray.filter（\u person=>\u person.phoneNumber！==phoneNumber）
localStorage.setItem（“person”，JSON.stringify（newArray））
}

每次我添加一个新的人物时，我都会用js制作一个按钮，它会在旁边添加这个按钮，它的内部有一个类RemoveBtn。现在，我正试图将每个人物分配给他们的按钮，通过单击该按钮，我会删除这个人物，这就是我想要做的。LocalStore非常缓慢，扩展性不好。如果您有数千个数据，则考虑使用索引XDB代替或SQLite。在这种情况下，您只需从localStorage获取数据并在“person”上循环以创建多个按钮。每个按钮都可以触发其phoneNumber的

removeByPhoneNumber