如何实现商品按钮10次点击后禁用且页面重载后保持禁用？

核心逻辑 #

• 用数组存储商品数据，每个商品包含唯一标识、库存数等信息
• 每次点击购买按钮时，对应商品库存减1，同时将最新的商品状态存入localStorage实现持久化
• 页面加载时优先从localStorage读取商品状态，初始化页面元素和按钮可用性

代码实现 #

HTML 结构 #

<div class="product">
  <p>商品A 库存: <span id="stock">10</span></p>
  <button id="buyBtn">立即购买</button>
</div>

JavaScript 实现 #

// 初始化商品数组（如果localStorage无数据则用默认值）
let products = JSON.parse(localStorage.getItem('products')) || [
  { id: 1, name: '商品A', stock: 10 }
];

// 获取页面元素
const stockEl = document.getElementById('stock');
const buyBtn = document.getElementById('buyBtn');

// 更新页面显示和按钮状态
function updateUI() {
  const targetProduct = products[0]; // 这里以第一个商品为例，多商品可遍历处理
  stockEl.textContent = targetProduct.stock;
  // 根据库存判断按钮是否禁用
  buyBtn.disabled = targetProduct.stock <= 0;
}

// 购买逻辑处理
function handleBuy() {
  const targetProduct = products[0];
  if (targetProduct.stock > 0) {
    targetProduct.stock -= 1;
    // 更新localStorage持久化数据
    localStorage.setItem('products', JSON.stringify(products));
    // 同步更新页面状态
    updateUI();
  }
}

// 页面加载时初始化状态
updateUI();
// 绑定按钮点击事件
buyBtn.addEventListener('click', handleBuy);

关键细节说明 #

• 持久化存储：localStorage会在浏览器刷新后保留数据，除非用户手动清除缓存，刚好满足页面重载维持状态的需求
• 按钮状态控制：每次库存变更和页面初始化时，都会通过targetProduct.stock <= 0的判断直接控制按钮禁用状态，逻辑简洁可靠
• 扩展性：如果有多个商品，只需遍历products数组，为每个商品的按钮绑定对应处理逻辑即可，核心逻辑无需修改

内容的提问来源于stack exchange，提问作者gritoverflow