如何仅使用JavaScript在页面间传递二维数组商品数据？

我是JavaScript新手，希望实现用户点击主页面的商品项时，将对应的二维数组形式的商品数据传递到商品页面，且不使用PHP或其他后端编程语言。尝试使用sessionStorage但未达到预期效果。

主页面代码 #

/* start of fifth section codes*/
let bestDeals = 
[
  [
    "https://i.pinimg.com/564x/2e/e1/25/2ee125c44f55f9ba271eed224a410d33.jpg",
    "Men, Football kits",
    "Brazil 2022/23 Stadium Home",
    "199$",
    "250$",
  ],
  [
    "https://i.pinimg.com/564x/20/6f/d5/206fd5f2e097717eee5a8e0ae94030c6.jpg",
    "Men, Football kits",
    "Saudi Arabia 2022/23 Away Jersey",
    "110 $",
    "199 $",
  ],
  [
    "https://i.pinimg.com/564x/76/a8/79/76a879179757d3a9ad2c12bc24e7457a.jpg",
    "Men, Football kits",
    "Man City Football Kit",
    "90 $",
    "140 $",
  ],
  [
    "https://i.pinimg.com/564x/b5/15/ad/b515ad05493a2a3686f10d6d82cf6910.jpg",
    "Men, Football kits",
    "Real Madrid 19/20 Home Kit",
    "200 $",
    "300 $",
  ],
  [
    "https://i.pinimg.com/564x/35/06/5d/35065d3b1a55c8dd0ff604849ff4a6df.jpg",
    "Men, Football kits",
    "Real Madrid 19/20 Away Kit",
    "199 $",
    "250 $",
  ],

]

let fifthContainer = document.getElementById("fifth-section-container");

bestDeals.forEach(deal =>{
  fifthContainer.innerHTML = fifthContainer.innerHTML + 
  `
  <div id="fifth-section-card" class="fifth-section-card" >

  <div class="product-details">

      <img id="product-img" src="${deal[0]}" alt="">

      <span id="product-listing">
          ${deal[1]}
      </span>
     
      <h4 id="product-name" > ${deal[2]}</h4>
      <br>
      <div class="price-div">
          <div class="price-content">
              <span id="product-price scale-card">${deal[3]}</span>
              <span id="product-discount">${deal[4]}</span>
          </div>
          <div class="price-icons" >
              <i class="fa-regular fa-heart scale-card" style="color: black;"></i>
              <i class="fa fa-shopping-bag scale-card" style="color:black;"></i>
          </div>
      </div>
  </div>

  </div>
  `
})
let fifthCard = document.getElementsByClassName("fifth-section-card");
let isClicked = true;

document.querySelectorAll(".fifth-section-container .fifth-section-card").forEach(item =>{
  
  item.onclick = () =>{

    sessionStorage.setItem('img', bestDeals[item])
    window.open("productInfo.html" ,"_self") 
  }
})

问题分析 #

1. 数组索引错误：bestDeals[item]中的item是DOM元素，不是数组的索引值，无法获取对应商品数据。
2. sessionStorage存储格式错误：sessionStorage仅支持存储字符串，直接存入数组会被转为[object Object]，无法正确读取。

解决方案 #

1. 修改主页面代码 #

在遍历商品项时，同时获取数组索引，点击时将对应商品数据转为JSON字符串存入sessionStorage：

/* 替换原点击事件代码 */
document.querySelectorAll(".fifth-section-container .fifth-section-card").forEach((item, index) =>{
  item.onclick = () =>{
    // 将商品数据转为JSON字符串存入sessionStorage
    sessionStorage.setItem('selectedProduct', JSON.stringify(bestDeals[index]))
    window.location.href = "productInfo.html"
  }
})

2. 商品页面（productInfo.html）代码 #

在商品页面中，从sessionStorage读取JSON字符串并解析为数组，然后渲染页面：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商品详情</title>
  <style>
    /* 可根据需求添加样式 */
    .product-detail-card {
      max-width: 600px;
      margin: 2rem auto;
      padding: 1rem;
      border: 1px solid #eee;
      border-radius: 8px;
    }
    .product-detail-card img {
      width: 100%;
      border-radius: 8px;
    }
    .price-content {
      margin: 1rem 0;
    }
    #product-price {
      font-size: 1.2rem;
      color: #e74c3c;
      font-weight: bold;
    }
    #product-discount {
      text-decoration: line-through;
      color: #999;
      margin-left: 0.5rem;
    }
  </style>
</head>
<body>
  <div class="product-detail-card" id="productDetailCard"></div>

  <script>
    // 从sessionStorage读取商品数据
    const selectedProduct = JSON.parse(sessionStorage.getItem('selectedProduct'));
    
    if (selectedProduct) {
      const card = document.getElementById('productDetailCard');
      // 渲染商品详情
      card.innerHTML = `
        <img src="${selectedProduct[0]}" alt="${selectedProduct[2]}">
        <span>${selectedProduct[1]}</span>
        <h2>${selectedProduct[2]}</h2>
        <div class="price-content">
          <span id="product-price">${selectedProduct[3]}</span>
          <span id="product-discount">${selectedProduct[4]}</span>
        </div>
      `;
      // 可选：读取后清除sessionStorage中的数据，避免刷新页面重复显示
      // sessionStorage.removeItem('selectedProduct');
    } else {
      // 没有获取到数据时的提示
      document.getElementById('productDetailCard').innerHTML = '<p>未找到商品信息，请返回主页选择商品</p>';
    }
  </script>
</body>
</html>

补充说明 #

• 确保主页面和商品页面在同一域名下（包括端口号），否则sessionStorage无法跨页面共享。
• 如果不想使用sessionStorage，也可以通过URL参数传递数据，但URL长度有限，适合数据量小的场景，示例：

  // 主页面点击事件
  item.onclick = () =>{
    const productStr = encodeURIComponent(JSON.stringify(bestDeals[index]))
    window.location.href = `productInfo.html?product=${productStr}`
  }
  

  // 商品页面读取URL参数
  const urlParams = new URLSearchParams(window.location.search);
  const productStr = urlParams.get('product');
  const selectedProduct = productStr ? JSON.parse(decodeURIComponent(productStr)) : null;
  

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