如何将自定义钢笔预览图通过onclick传至购物车/订单页？

要实现把定制钢笔的预览内容传到购物车/订单页面的功能，你得补全sendIt()函数的代码，还要在购物车页面加接收和展示数据的逻辑。下面是两种常用的做法：

方式一：用URL查询参数传数据 #

这种方式适合简单数据传递，数据会附在购物车页面的URL里，优点是直观、不需要额外存储。

1. 补全当前页面的sendIt()函数 #

在当前页面的<script>标签里加这段代码：

function sendIt() {
    // 拿到预览区的元素
    const materialPic = document.getElementById('picMaterial');
    const stylePic = document.getElementById('picStyle');
    const penTitle = document.getElementById('picTitle');

    // 整理要传的数据
    const penInfo = {
        materialSrc: materialPic.src,
        styleSrc: stylePic.src,
        title: penTitle.textContent.trim()
    };

    // 把数据转成URL可识别的参数格式
    const queryString = new URLSearchParams(penInfo).toString();

    // 跳转到购物车页面并带上参数
    window.location.href = `cart.html?${queryString}`;
}

2. 购物车页面接收并展示数据 #

在购物车页面（比如cart.html）的<script>标签里加这段代码：

window.addEventListener('load', () => {
    // 从URL里提取参数
    const params = new URLSearchParams(window.location.search);
    
    // 取出钢笔的预览数据
    const materialSrc = params.get('materialSrc');
    const styleSrc = params.get('styleSrc');
    const penTitle = params.get('title');

    // 创建预览容器，把内容塞进去
    const previewBox = document.createElement('div');
    previewBox.className = 'cart-preview';

    // 加标题
    const titleEl = document.createElement('h3');
    titleEl.textContent = penTitle;
    previewBox.appendChild(titleEl);

    // 加材质预览图
    const materialImg = document.createElement('img');
    materialImg.src = materialSrc;
    materialImg.alt = '钢笔材质预览';
    materialImg.style.width = '600px';
    previewBox.appendChild(materialImg);

    // 加款式预览图
    const styleImg = document.createElement('img');
    styleImg.src = styleSrc;
    styleImg.alt = '钢笔款式预览';
    styleImg.style.width = '600px';
    styleImg.className = 'testTop'; // 保留原样式类
    previewBox.appendChild(styleImg);

    // 把预览容器插到购物车页面的合适位置（比如body或者指定的商品容器）
    document.body.appendChild(previewBox);
});

方式二：用LocalStorage存数据 #

这种方式不会把数据暴露在URL里，适合传递稍复杂的内容，但数据会存在用户浏览器本地，需要注意清理。

1. 补全当前页面的sendIt()函数 #

function sendIt() {
    const materialPic = document.getElementById('picMaterial');
    const stylePic = document.getElementById('picStyle');
    const penTitle = document.getElementById('picTitle');

    const penInfo = {
        materialSrc: materialPic.src,
        styleSrc: stylePic.src,
        title: penTitle.textContent.trim()
    };

    // 把数据转成JSON字符串存在本地存储
    localStorage.setItem('customPen', JSON.stringify(penInfo));

    // 跳转到购物车页面
    window.location.href = 'cart.html';
}

2. 购物车页面接收并展示数据 #

window.addEventListener('load', () => {
    // 从本地存储取数据
    const penDataStr = localStorage.getItem('customPen');
    if (!penDataStr) return;

    const penInfo = JSON.parse(penDataStr);

    // 创建预览容器（和方式一逻辑一致）
    const previewBox = document.createElement('div');
    previewBox.className = 'cart-preview';

    const titleEl = document.createElement('h3');
    titleEl.textContent = penInfo.title;
    previewBox.appendChild(titleEl);

    const materialImg = document.createElement('img');
    materialImg.src = penInfo.materialSrc;
    materialImg.alt = '钢笔材质预览';
    materialImg.style.width = '600px';
    previewBox.appendChild(materialImg);

    const styleImg = document.createElement('img');
    styleImg.src = penInfo.styleSrc;
    styleImg.alt = '钢笔款式预览';
    styleImg.style.width = '600px';
    styleImg.className = 'testTop';
    previewBox.appendChild(styleImg);

    document.body.appendChild(previewBox);

    // 可选：取完数据就删掉本地存储的内容，避免残留
    localStorage.removeItem('customPen');
});

注意点 #

• 确保预览图片的src是绝对URL，或者购物车页面能正确解析相对路径。
• 用LocalStorage的话，要考虑用户清除浏览器缓存的情况，必要时可以把URL参数作为备用方案。
• 可以根据购物车页面的现有布局，调整预览容器的插入位置（比如插到已有的商品列表里）。

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