localStorage购物车问题：页面刷新后商品数量重置为0

你的代码存在几个核心问题，导致页面刷新后商品数量会重置为0：

1. localStorage 键名使用错误 #

你用空字符串作为localStorage的操作键，这会导致存储、读取逻辑混乱，应该使用一个明确的标识作为键，比如'cartItemCount'。

2. 页面加载时未同步本地存储值到全局变量 #

loadlocal函数内部重新声明了locstor变量，覆盖了全局变量，导致读取逻辑失效；同时没有把读取到的本地存储值赋值给全局的current变量，刷新后current仍保持初始的0值。另外也没处理本地存储不存在的情况（首次访问会返回null）。

3. DOM 元素未与本地存储同步 #

页面里的productStat和basket元素初始值是硬编码的0，加载时没有从本地存储读取数据更新它们。

修正后的 JavaScript 代码 #

// 使用明确的本地存储键名
const STORAGE_KEY = 'cartItemCount';
// 初始化时从localStorage读取值，不存在则设为0
let current = parseInt(localStorage.getItem(STORAGE_KEY)) || 0;

function loadlocal() {
    // 同步本地存储值到所有需要显示的DOM元素
    document.getElementById("productStat").textContent = current;
    document.getElementById("basket").textContent = current;
}

function addItem() {
    current++;
    // 更新DOM和本地存储
    document.getElementById("productStat").textContent = current;
    localStorage.setItem(STORAGE_KEY, current);
    document.getElementById("basket").textContent = current;
}

function removeItem() {
    if (current > 0) {
        current--;
    }
    // 更新DOM和本地存储
    document.getElementById("productStat").textContent = current;
    localStorage.setItem(STORAGE_KEY, current);
    document.getElementById("basket").textContent = current;
}

修正后的 HTML 代码 #

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Productpagina</title>
  <link href="buyingFunction.css" rel="stylesheet">
</head>

<body onload="loadlocal()">
  <p>
    <button onclick="removeItem()">-</button>
    <!-- 初始值留空，由loadlocal函数填充 -->
    <span id="productStat">&nbsp;&nbsp;</span>
    <button onclick="addItem()">+</button>
  </p>

  <div>
    <!-- 初始值留空，由loadlocal函数填充 -->
    <button id="basket"></button>
  </div>

  <script src="buyingFunction.js"></script>
</body>

</html>

关键修复说明 #

• 用固定键名cartItemCount操作localStorage，避免空键带来的逻辑混乱。
• 初始化current时直接读取本地存储值，通过parseInt转换为数字，并用|| 0处理首次访问的默认值。
• loadlocal函数统一负责同步本地存储数据到DOM元素，避免硬编码初始值。
• 简化增减商品的逻辑，先更新变量，再同步DOM和本地存储，保持逻辑一致性。

内容的提问来源于stack exchange，提问作者Tom de Wilde