如何使用 localStorage 在重新加载页面时使按钮保持禁用状态？

Question

我在做一个有产品的网上商店。单击 10 次后按钮禁用，当库存用完时，库存为 10。我在 localStorage 中保存有关产品和数量的数据。

我的问题是，当我重新加载页面时，我可以再次点击按钮，即使它超过 10 个项目。即使在重新加载页面后，如何保持按钮处于禁用状态。我尝试将按钮保存在 localStorage 中，并使用 if 语句检查它是否在 localStorage 中，然后保持按钮处于禁用状态。

按钮代码：

if (products[i].inCart === 10) {
  const disabled = (euro[i].disabled = true);
  localStorage.setItem("disabled", disabled);
  let newDisabled = localStorage.getItem("disabled");
  newDisabled = JSON.parse(newDisabled);
  if (newDisabled === true) {
    euro[i].disabled = true;
  }
}

孔脚本：

let cartNr = document.getElementById("cartNr");
const lang1 = document.querySelector(".lang1");
cartNr = 1;

let products = [
  {
    id: 0,
    namn: "Sneaker1",
    img: "//shelta.se/pub_images/original/DV1129-300_1.jpg?timestamp=1677759773",
    pris: 1500,
    lager: 10,
    inCart: 0,
  },
  {
    id: 1,
    namn: "Sneaker2",
    img: "https://shelta.se/pub_images/original/AH6789-006_1.jpg",
    pris: 1500,
    lager: 10,
    inCart: 0,
  },
  {
    id: 2,
    namn: "Sneaker3",
    img: "https://shelta.se/pub_images/original/DV1129-001_1.jpg?timestamp=1673044814",
    pris: 1500,
    lager: 10,
    inCart: 0,
  },
  {
    id: 3,
    namn: "Sneaker4",
    img: "https://shelta.se/pub_images/original/AH6789-001_1.jpg?timestamp=1609192138",
    pris: 1500,
    lager: 10,
    inCart: 0,
  },
  {
    id: 4,
    namn: "Sneaker5",
    img: "https://shelta.se/pub_images/original/DM2361-100_0.jpg?timestamp=1628091117",
    pris: 1500,
    lager: 10,
    inCart: 0,
  },
];

const euro = document.querySelectorAll(".euro");

for (let i = 0; i < euro.length; i++) {
  euro[i].addEventListener("click", () => {
    cartNumbers(products[i]);
    totalCost(products[i]);

    if (products[i].inCart === 10) {
      const disabled = (euro[i].disabled = true);
      localStorage.setItem("disabled", disabled);
      let newDisabled = localStorage.getItem("disabled");
      newDisabled = JSON.parse(newDisabled);
      if (newDisabled === true) {
        euro[i].disabled = true;
      }
    }
  });
}

function onLoadCartNumbers() {
  let productNumbers = localStorage.getItem("cartNumbers");
  if (productNumbers) {
    lang1.innerHTML = `<div id="cartNr">${(cartNr = productNumbers)}</div>`;
  }
}

function cartNumbers(product) {
  console.log("the product clicked is", product);
  let productNumbers = localStorage.getItem("cartNumbers");
  productNumbers = parseInt(productNumbers);
  if (productNumbers) {
    localStorage.setItem("cartNumbers", productNumbers + 1);
    lang1.innerHTML = `<div id="cartNr">${(cartNr = productNumbers + 1)}</div>`;
  } else {
    localStorage.setItem("cartNumbers", 1);
    lang1.innerHTML = `<div id="cartNr">${(cartNr = 1)}</div>`;
  }

  setItems(product);
}

function setItems(product) {
  let cartItems = localStorage.getItem("productsInCart");
  cartItems = JSON.parse(cartItems);
  console.log(cartItems); //funkar
  if (cartItems != null) {
    if (cartItems[product.id] == undefined) {
      cartItems = {
        ...cartItems,
        [product.id]: product,
      };
      console.log(cartItems);
    } else {
      cartItems[product.id].inCart += 1;

      product.inCart++;

      console.log(cartItems); //funkar
    }
  } else {
    product.inCart = 1;
    cartItems = {
      [product.id]: product,
    };
    console.log(cartItems); //funkar
  }

  localStorage.setItem("productsInCart", JSON.stringify(cartItems));
  console.log(localStorage.getItem("productsInCart"));
}

function totalCost(product) {
  let cartCost = localStorage.getItem("totalCost");
  if (cartCost != null) {
    cartCost = parseInt(cartCost);
    localStorage.setItem("totalCost", cartCost + product.pris);
  } else {
    localStorage.setItem("totalCost", product.pris);
  }
}

async function patchPost(obj) {
  const baseURL = `https://webstore-22fa4-default-rtdb.europe-west1.firebasedatabase.app/`;
  const url = baseURL + `Products.json`;
  const init = {
    method: "PUT",
    body: JSON.stringify(obj),
    headers: {
      "Content-type": "application/json; charset=UTF-8",
    },
  };

  const response = await fetch(url, init);
  const data = await response.json();
  console.log(data);
}
let obj = Object.values(products);
patchPost(obj);
console.log(obj);

onLoadCartNumbers();

Answer 1

将

addEventListener

放在

for loop

中不是一个好主意。相反，您可以在包含这些按钮和

eventListener

的

parent

上添加

useCapture

以细化事件并识别

target button

。另一件事，您将需要一个

reference

，您将保存哪个按钮应该被禁用。我从你的代码中得到的是，你的购物车中有多个项目，如果超过最大数量，你想禁用它，并且应该在页面刷新时保持这种状态。

我创建了一个简单的实用程序，您可以参考它并相应地修改您的代码。

const prArr = [
  { id: 1, lager: 10, inCart: 0 },
  { id: 2, lager: 10, inCart: 0 },
  { id: 3, lager: 10, inCart: 0 },
  { id: 4, lager: 10, inCart: 0 },
  { id: 5, lager: 10, inCart: 0 },
  { id: 6, lager: 10, inCart: 0 },
  { id: 7, lager: 10, inCart: 0 }
]

const disabledItems = JSON.parse(localStorage.getItem('disabledItems'))
if (!disabledItems) {
  localStorage.setItem('disabledItems', JSON.stringify([]))
}
document.querySelector('span').textContent = localStorage.getItem('disabledItems')

prArr.forEach(pr => {
  const btn = document.createElement('button')
  btn.setAttribute('id', pr.id)
  btn.textContent = `btn ${pr.id}`
  const container = document.querySelector('div')
  container.appendChild(btn)
})

const disableButtons = () => {
  disabledItems?.forEach(item => {
    document.getElementById(item.id).setAttribute('disabled', true)
  })
}

document.querySelector('div').addEventListener('click', (event) => {
  const tg = event.target
  if (tg.tagName === 'BUTTON') {
    const clickedPr = prArr.find((pr) => {
      return pr.id === +tg.id
    })
    if (clickedPr.inCart < clickedPr.lager - 1) clickedPr.inCart++
    else {
      tg.setAttribute('disabled', true)
      disabledItems.push({ id: tg.id })
      localStorage.setItem('disabledItems', JSON.stringify(disabledItems))
      document.querySelector('span').textContent = localStorage.getItem('disabledItems')
    }
  }
}, true)

disableButtons()

<div></div>
disabled butttons: <span></span>

你可以在本地运行上面的代码，

localStorage

不会在代码片段中工作。