JS电商项目跨页面如何复用购物车变量、值及相关函数

开发电商项目的用户信息填写页面时，无法调用之前页面定义的cart变量、total.textContent属性。需求是在该页面同时展示购物车商品列表、购物车总金额、用户信息填写表单，但当前无法跨页面调用之前页面定义的任何变量与函数。

const container = document.getElementById("container");
const cartContainer = document.getElementById("cart-items");

let cart = [];

export let stock = [
  {
    id: 1,
    item: "Playera blanca - Logo rojo",
    precio: 265,
    imagen: '<img class="cart-review-img" src="./images/Playera blanca - Logo rojo.png" alt="">'
  }
];

const upDateCart = () => {
  cartContainer.innerHTML = ""

  cart.forEach((prod) => {
    const div = document.createElement("div")
    div.className = ("cart-review-cotainer")
    div.innerHTML = `
    <div class="cart-image col-md-5">
        ${prod.imagen}
    </div>
    <div class="col-md-5 d-flex flex-column  justify-content-between">
        <div>
            <p id="cart-item-name">${prod.item}</p>
            <p id="cart-item-price">${prod.precio}</p>
        </div>
    </div>
    <div class="col-md-2 delete-container">
        <button onclick="deleteItem(${prod.id})" id="delete-item"><img class="delete-img" src="./images/trash-solid.svg" alt=""></button>
    </div>
    `
    cartContainer.appendChild(div)
    localStorage.setItem("newCart", JSON.stringify(cart))
  })
  total.innerText = cart.reduce((acc, prod) => acc + prod.precio, 0)
}

if(localStorage.getItem("newCart")) {
  newCart = JSON.parse(localStorage.getItem("newCart"))
  console.log(newCart)
  upDateCart()
}

window.deleteItem = deleteItem;
window.cart = cart;
window.test = test;
window.newCart = newCart;

VS Code中的项目文件结构

• 核心原因：浏览器每个独立HTML页面的JavaScript执行上下文完全隔离，把变量挂载到window对象的操作仅对当前加载了这段脚本的页面生效，页面跳转后新页面的window是全新实例，之前挂载的所有属性、方法都会被销毁，自然无法跨页读取。
• 跨页数据传递直接用已经实现的localStorage即可，不需要依赖跨页window变量：在用户信息填写页的脚本中，直接读取localStorage里存储的购物车数据，再完成商品列表渲染、总金额计算即可，参考代码：

// 用户信息页脚本
const cartContainer = document.getElementById("cart-items");
const totalEl = document.getElementById("total");
// 直接读本地存储的购物车数据，空数组兜底
const cart = JSON.parse(localStorage.getItem("newCart")) || [];

// 渲染购物车逻辑和之前保持一致即可
const renderCart = () => {
  cartContainer.innerHTML = ""
  cart.forEach(prod => {
    // 拼接商品DOM逻辑和原有代码一致
  })
  // 计算总金额直接赋值
  totalEl.textContent = cart.reduce((acc, prod) => acc + prod.precio, 0)
}
renderCart()

• 修复原有代码的语法错误：
  • 补充totalDOM元素的获取逻辑，要在代码开头加const total = document.getElementById("total")，否则执行total.innerText时会抛出变量未定义错误
  • 读取本地存储时补充正确的变量声明，且将读取到的购物车数据直接赋值给cart变量，不要额外声明无意义的newCart变量，否则upDateCart函数遍历的始终是空数组
  • 确保挂载到window的deleteItem、test函数在挂载逻辑之前已经完成定义，否则会抛出undefined错误
• 如果需要多页复用购物车渲染、金额计算的公共逻辑，把公共代码抽成独立的JS文件，所有需要用到该逻辑的页面都引入这个公共脚本即可；如果使用ES Module的export/import语法，对应的script标签要添加type="module"属性。

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