如何在HTML页面间传递变量数据？购物车功能实现问题

因为两个页面的DOM环境完全独立，无法直接操作另一个页面的元素，核心思路是通过数据存储+页面加载时渲染来实现同步，以下是几种实用方案：

方案一：使用 localStorage（推荐，纯前端持久化方案） #

通过浏览器本地存储保存购物车数据，所有页面都能读取并渲染，数据会持久保留（除非用户手动清除）。

修改后的完整代码： #

// 页面1的添加按钮点击逻辑
function addToCartClicked(event) {
    var button = event.target;
    var shopItem = button.parentElement.parentElement;
    var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText;
    var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText;
    var imageSrc = shopItem.getElementsByClassName('shop-item-image')[0].src;
    
    // 保存商品到本地购物车
    saveCartItem({ title, price, imageSrc });
    // 同步更新当前页面的购物车（如果页面1也有购物车元素）
    renderCartItems();
}

// 封装：保存商品到localStorage
function saveCartItem(item) {
    // 读取现有购物车数据，没有则初始化空数组
    let cart = JSON.parse(localStorage.getItem('cart')) || [];
    // 可添加逻辑：检查商品是否已存在，避免重复添加
    const isExist = cart.some(cartItem => cartItem.title === item.title);
    if (!isExist) cart.push(item);
    // 存回本地存储
    localStorage.setItem('cart', JSON.stringify(cart));
}

// 封装：渲染购物车到当前页面的.cart-items元素
function renderCartItems() {
    var cartItems = document.getElementsByClassName('cart-items')[0];
    if (!cartItems) return; // 当前页面没有购物车元素则直接返回
    
    // 清空现有内容，避免重复渲染
    cartItems.innerHTML = '';
    
    // 读取本地购物车数据
    let cart = JSON.parse(localStorage.getItem('cart')) || [];
    
    // 逐个渲染商品
    cart.forEach(item => {
        var cartRow = document.createElement('div');
        cartRow.innerText = `${item.title} ${item.price} ${item.imageSrc}`;
        cartItems.append(cartRow);
    });
}

// 页面加载时自动渲染购物车（页面1和页面2都需要执行此逻辑）
window.addEventListener('load', renderCartItems);

补充说明： #

• 如果不需要持久化数据（比如关闭页面后清空购物车），可以把localStorage替换成sessionStorage，用法完全一致，数据仅在当前浏览器会话中有效。

方案二：URL参数传递（适合单次跳转场景） #

如果用户是从页面1点击按钮直接跳转到页面2，可以把商品数据通过URL参数传递，页面2读取参数后渲染。

修改后的代码： #

// 页面1的添加按钮逻辑
function addToCartClicked(event) {
    var button = event.target;
    var shopItem = button.parentElement.parentElement;
    var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText;
    var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText;
    var imageSrc = shopItem.getElementsByClassName('shop-item-image')[0].src;
    
    // 把商品数据转为URL参数
    const params = new URLSearchParams({ title, price, imageSrc });
    // 跳转到页面2并携带参数
    window.location.href = `page2.html?${params.toString()}`;
}

// 页面2加载时读取参数并渲染
window.addEventListener('load', () => {
    var cartItems = document.getElementsByClassName('cart-items')[0];
    if (!cartItems) return;
    
    // 读取URL中的参数
    const params = new URLSearchParams(window.location.search);
    const title = params.get('title');
    const price = params.get('price');
    const imageSrc = params.get('imageSrc');
    
    if (title && price && imageSrc) {
        var cartRow = document.createElement('div');
        cartRow.innerText = `${title} ${price} ${imageSrc}`;
        cartItems.append(cartRow);
    }
});

补充说明： #

• 此方案仅适合单次跳转场景，刷新页面2后数据会丢失；如果需要添加多个商品，URL参数会变得冗长，灵活性不如localStorage。

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