修改多个存储键时防止重复操作

Question

我已经学习 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);
});

Answer 1

您可以像这样将其保存为一个元素：

//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
});

修改多个存储键时防止重复操作

Prevent duplicate action when multiple storage keys are modified

javascript

addeventlistener

local-storage

dom-events