如何用HTML、CSS、JS创建动态商品页？localStorage失效求助

你的代码核心问题 #

你当前存储的是DOM元素对象（比如price是<a>标签元素），但JSON无法正确序列化DOM对象，JSON.stringify(price)得到的其实是空对象{}，所以新页面解析后自然拿不到有效数据。必须存储元素的实际数据内容，而非元素本身。

修正localStorage方案 #

第一段脚本（商品列表页） #

document.querySelectorAll(".card").forEach(item => {
    item.addEventListener("click", onProductClick);
})

function onProductClick(){
    const div = document.getElementById(this.id);
    // 提取DOM元素的实际数据，而非元素本身
    const productData = {
        imgSrc: div.querySelector('img').src,
        imgAlt: div.querySelector('img').alt,
        rating: div.getElementsByTagName('a')[2].textContent,
        reviewCount: div.getElementsByTagName('a')[3].textContent,
        price: div.getElementsByTagName('a')[4].textContent
    };

    // 存储纯数据对象
    window.localStorage.setItem("selectedProduct", JSON.stringify(productData));
    // 跳转到商品详情页（替换成你的实际页面路径）
    window.location.href = "product-detail.html";
}

第二段脚本（商品详情页） #

const productPageImage = document.getElementById("product-image");
// 读取并解析存储的数据
const selectedProduct = JSON.parse(window.localStorage.getItem("selectedProduct"));

if (selectedProduct) {
    // 渲染数据到页面
    productPageImage.src = selectedProduct.imgSrc;
    productPageImage.alt = selectedProduct.imgAlt;
    // 示例：渲染价格到对应元素
    document.getElementById("product-price").textContent = selectedProduct.price;
    // 其他数据同理渲染
}

除cookie外的其他解决方案 #

1. URL参数传递 #

适合数据量较小的场景，直接把数据编码到跳转URL中：

列表页代码

function onProductClick(){
    const div = document.getElementById(this.id);
    const productData = {
        imgSrc: div.querySelector('img').src,
        price: div.getElementsByTagName('a')[4].textContent
        // 其他必要数据
    };
    // 把数据编码为URL参数
    const params = new URLSearchParams(productData).toString();
    // 跳转并携带参数
    window.location.href = `product-detail.html?${params}`;
}

详情页代码

// 解析URL参数
const params = new URLSearchParams(window.location.search);
const imgSrc = params.get("imgSrc");
const price = params.get("price");

if (imgSrc) {
    document.getElementById("product-image").src = imgSrc;
}

2. SessionStorage #

和localStorage用法完全一致，但数据仅在当前会话（标签页打开期间）有效，关闭标签页后自动清除，适合临时数据传递：

// 列表页存储
window.sessionStorage.setItem("selectedProduct", JSON.stringify(productData));
// 详情页读取
const selectedProduct = JSON.parse(window.sessionStorage.getItem("selectedProduct"));

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