跨HTML页面操作购物车：如何更新另一页面标签内容？

问题核心 #

浏览器中不同页面的DOM环境完全独立，无法直接从当前页面操作另一个页面的元素，必须通过数据共享机制间接实现需求。

1. 跨页面访问数据的实现方式 #

使用浏览器本地存储（localStorage或sessionStorage）来共享购物车数据：

• localStorage是持久化存储，关闭浏览器后数据仍保留；
• sessionStorage是会话级存储，关闭标签页后数据会清除，可根据需求选择。

修改AllItems.html中的addToCart函数，把商品信息存入本地存储：

function addToCart(item) {
  // 读取已有购物车数据，无数据则初始化为空数组
  let cartItems = JSON.parse(localStorage.getItem('cartItems')) || [];
  // 添加当前商品（可根据需求添加去重逻辑）
  cartItems.push(item);
  // 将数组转为字符串存入localStorage
  localStorage.setItem('cartItems', JSON.stringify(cartItems));
  
  // 可选：添加成功提示
  alert(`${item} 已加入购物车`);
}

2. 向目标页面写入文本的方法 #

在islandTimeCart.html中添加页面加载监听，读取存储的数据后更新自身标签内容：

<body>
  Island Time Cart
  <label id="islandTimeCartLabel"></label>

  <script>
    // 页面加载完成后执行
    window.onload = function() {
      // 读取购物车数据
      const cartItems = JSON.parse(localStorage.getItem('cartItems')) || [];
      const cartLabel = document.getElementById('islandTimeCartLabel');
      // 将商品列表转为字符串显示（可自定义格式，比如换行、列表）
      cartLabel.textContent = cartItems.length > 0 ? cartItems.join(', ') : '购物车为空';
    };
  </script>
</body>

额外实用补充 #

如果需要在购物车页面实时监听主页面的添加操作（比如两个页面同时打开），可以在islandTimeCart.html中添加storage事件监听：

window.addEventListener('storage', function(e) {
  if (e.key === 'cartItems') {
    const cartItems = JSON.parse(e.newValue) || [];
    document.getElementById('islandTimeCartLabel').textContent = cartItems.join(', ');
  }
});

注意：localStorage仅支持字符串存储，所以需要用JSON.stringify()和JSON.parse()处理数组或对象类型的数据。

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