Javascript 在修改多个存储密钥时防止重复操作

我已经学习JavaScript大约一个月了，现在我正在做一个小项目（购物车），深入研究存储事件。我已经成功地将“tab1”中的一些键存储到本地存储器中，并从“tab2”中检索它们。然而，我遇到了一个特别的“问题”，这是我过去几天一直在努力解决的问题

在“tab1”中，我有五个键存储在localStorage中。在“tab2”中，每当localStorage发生更改时，我都需要完成一个操作（创建一个HTML元素）。问题是，每更改一个键，操作都会触发一次。换句话说，我不断得到5个重复的HTML元素

我花了很多时间在论坛、YouTube视频、博客上搜索答案，当然还有这里。到目前为止没有运气。我也一直在阅读有关localStorage的文档，但由于我是这方面的新手，所以对我来说还不是很清楚

我希望你能帮我找到一个解决方案，或者理解为什么我总是重复这些动作

这是我迄今为止的代码示例：

let itemList = document.getElementById("itemList");
let summaryItem = document.getElementById("summaryItem_01");
let summaryImage = document.getElementById("itemImage_01");
let summaryName = document.getElementById("item_Name_01");
let summaryModel = document.getElementById("itemModel_01");
let summaryQuantity = document.getElementById("detailQuantityDisplay_01");
let summaryPrice = document.getElementById("itemPriceAmount_01");

//Gets localStorage info on page load and feeds summaryItem fields.
window.addEventListener("load", () => {
    let itemImage = localStorage.getItem("modalItemImage");
    let itemName = localStorage.getItem("modalItemName");
    let itemModel = localStorage.getItem("modalItemModel");
    let itemQuantity = localStorage.getItem("modalItemQuantity");
    let itemPrice = localStorage.getItem("modalItemUnitPrice");

    //Prints localStorage info to summaryItem element.
    summaryImage.setAttribute("src", itemImage);
    summaryName.innerText = itemName;
    summaryModel.innerText = itemModel;
    summaryQuantity.value = itemQuantity;
    summaryPrice.innerText = itemPrice;
});

//This is where I'm getting the duplicate action
window.addEventListener("storage", () => {
    let a = document.createElement("article");
    itemList.appendChild(a);
});

更新： 在MauriceNino的建议下，我最终得到了这个代码，它工作得非常好：

//Tab1

let modalItem = {
    modalItemImage: displayModalImage.innerHTML.slice(10, -2),
    modalItemName: displayModalName.innerText,
    modalItemModel: displayModalModel.innerText,
    modalItemQuantity: displayModalQty.value,
    modalItemUnitPrice: displayModalPrice.innerText,
    modalItemTotal: displayModalTotal.innerText,
  };

  localStorage.setItem("modalItem", JSON.stringify(modalItem));

//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

//Tab2

//Gets localStorage info from modal
  let data = JSON.parse(localStorage.getItem("modalItem"));
  let dataArray = Object.values(data);

  let itemImage = dataArray[0];
  let itemName = dataArray[1];
  let itemModel = dataArray[2];
  let itemQuantity = dataArray[3];
  let itemPrice = dataArray[4];

//Prints localStorage info to summaryItem element.
  summaryImage.setAttribute("src", itemImage);
  summaryName.innerText = itemName;
  summaryModel.innerText = itemModel;
  summaryQuantity.value = itemQuantity;
  summaryPrice.innerText = itemPrice;

//Creates new summaryItem when there's a chnage on localStorage.
window.addEventListener("storage", () => {
  let a = document.createElement("article");
  itemList.appendChild(a);
});

---

您可以将其保存为一个元素，如下所示：

//Gets localStorage info on page load and feeds summaryItem fields.
window.addEventListener("load", () => { 
    // Get all the data in a single statement
    let { itemImage, itemName, itemModel, itemQuantity, itemPrice } 
          = localStorage.getItem("modalItem");

    //Prints localStorage info to summaryItem element.
    summaryImage.setAttribute("src", itemImage);
    // ...
});

//Will be called only once now
window.addEventListener("storage", () => {
    let a = document.createElement("article");
    itemList.appendChild(a);
});

// This is where you are saving your localStorage settings
localStorage.setItem("modalItem", { 
    itemImage: 'image', 
    itemName: 'name', 
    itemModel: 'model', 
    itemQuantity: 2, 
    itemPrice: 3
});

---

非常感谢你！你的回答当场就对了。我知道解决办法必须很简单，但我就是看不出来。我想我过着新手的生活。但是，我想指出，我必须使用JSON.stringify和JSON.parse来写/读对象。但它工作得很好。再次感谢你帮我看到我错过了什么！