如何使用JavaScript在HTML页面间传值实现多页面购物车同步功能

问题原因 #

你当前的实现是把购物车数据完全存在当前页面的运行内存中，页面跳转、刷新后数据就会被清空，自然无法实现跨页面同步。你之前用$.get、$.post没生效，大概率是没有配套的后端服务处理购物车数据的存储、查询逻辑，直接调用空接口肯定没用。

最低成本解决：用localStorage实现同站跨页面同步 #

localStorage是浏览器同域名下所有页面共享的持久化存储，只要用户不清除缓存，数据会一直存在，刚好适合你这种同站点跨页面共享数据的需求，只需要在你原有代码基础上增加存储、读取逻辑即可：

1. 先封装购物车存取工具函数

// 从localStorage获取购物车数据
function getCartFromStorage() {
  const cart = localStorage.getItem('siteCart')
  return cart ? JSON.parse(cart) : []
}

// 保存购物车数据到localStorage
function saveCartToStorage(cartItems) {
  localStorage.setItem('siteCart', JSON.stringify(cartItems))
}

2. 修改添加购物车逻辑，同步写入存储

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
    if(price == '') {
      return;
    }
    // 先做存储层的去重判断、写入
    const cart = getCartFromStorage()
    const isExist = cart.some(item => item.title === title)
    if(isExist) {
      alert('This item is already added to the cart')
      return
    }
    cart.push({title, price, imageSrc, quantity: 1})
    saveCartToStorage(cart)
    // 再渲染当前页的购物车
    addItemToCart(title, price, imageSrc, 1)
    updateCartTotal()
}

// 新增quantity参数，兼容从存储读取的历史数量
function addItemToCart(title, price, imageSrc, quantity = 1) {
    var cartRow = document.createElement('div')
    cartRow.classList.add('cart-row')
    var cartItems = document.getElementsByClassName('cart-items')[0]
    var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
    for (var i = 0; i < cartItemNames.length; i++) {
        if (cartItemNames[i].innerText == title) {
            return
        }
    }
    var cartRowContents = `
        <div class="cart-item cart-column">
            <img class="cart-item-image" src="${imageSrc}" width="100" height="100">
            <span class="cart-item-title">${title}</span>
        </div>
        <span class="cart-price cart-column">${price}</span>
        <div class="cart-quantity cart-column">
            <input class="cart-quantity-input" type="number" value="${quantity}">
            <button class="btn btn-danger" type="button">REMOVE</button>
        </div>`
    cartRow.innerHTML = cartRowContents
    cartItems.append(cartRow)
    cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)
    cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
}

3. 页面加载时自动从存储读取并渲染购物车

所有包含购物车区域的页面（StoreA.html、StoreB.html、Cart.html）都要加这段逻辑：

document.addEventListener('DOMContentLoaded', function() {
  const cart = getCartFromStorage()
  cart.forEach(item => {
    addItemToCart(item.title, item.price, item.imageSrc, item.quantity)
  })
  updateCartTotal()
})

4. 修改删除、数量变更逻辑，同步更新存储

function removeCartItem(event) {
  var buttonClicked = event.target
  var cartRow = buttonClicked.parentElement.parentElement
  var title = cartRow.getElementsByClassName('cart-item-title')[0].innerText
  // 同步删除存储里的对应商品
  const cart = getCartFromStorage()
  const newCart = cart.filter(item => item.title !== title)
  saveCartToStorage(newCart)
  // 移除页面元素
  cartRow.remove()
  updateCartTotal()
}

function quantityChanged(event) {
  var input = event.target
  if (isNaN(input.value) || input.value <= 0) {
    input.value = 1
  }
  var cartRow = input.parentElement.parentElement
  var title = cartRow.getElementsByClassName('cart-item-title')[0].innerText
  // 同步更新存储里的商品数量
  const cart = getCartFromStorage()
  const newCart = cart.map(item => {
    if(item.title === title) {
      item.quantity = parseInt(input.value)
    }
    return item
  })
  saveCartToStorage(newCart)
  updateCartTotal()
}

正式项目方案：后端存储 #

如果需要支持用户换设备也能看到自己的购物车，就需要后端配合：

• 后端写购物车增/删/改/查接口，和用户账号绑定，数据存在数据库中
• 把上面代码中操作localStorage的逻辑换成调用对应的后端接口即可，你之前用$.post没生效就是缺了后端接口层的实现。

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