如何存储选中塔罗牌信息并在下一页面展示（前端实现）

纯前端无后端场景下，用浏览器本地存储localStorage传递选中数据是最简便的方案，数据存在用户本地浏览器，跳转页面后可直接读取，不需要服务端支持。

第一步：修改选牌页的JS逻辑 #

你原来的遍历框架只需要补全收集选中值、存储、跳转的逻辑即可，注意修正你代码里if判断的笔误（多写了一个右括号）：

function test_checkbox() {
    // 初始化数组存储选中的卡牌信息
    const selectedCards = [];
    const checkboxes = document.getElementsByName("lang");
    for(let i = 0; i < checkboxes.length; i++) {
        if(checkboxes[i].checked) {
            // 把卡牌ID、对应图片地址一起存，下一页不用再做资源匹配
            selectedCards.push({
                id: checkboxes[i].value,
                img: checkboxes[i].nextElementSibling.querySelector("img").src
            });
        }
    }

    // 未选牌时给出提示，阻断跳转
    if(selectedCards.length === 0) {
        alert("请先选择要查看的塔罗牌");
        return;
    }

    // 把选中数据转成字符串存入本地存储
    localStorage.setItem("userSelectedCards", JSON.stringify(selectedCards));
    // 跳转到结果展示页，把路径替换成你自己的结果页地址即可
    window.location.href = "result.html";
}

你还需要在选牌页的卡牌列表下方加一个触发按钮，绑定上面的函数，不然逻辑没有执行入口：

<!-- 加在</ul>标签后面即可 -->
<button onclick="test_checkbox()">确认选牌</button>

第二步：结果页读取存储的选中数据 #

在你的结果展示页（也就是上面代码里跳转的result.html），页面加载时读取本地存储的内容，直接渲染卡牌即可：

<!-- 结果页留一个卡牌展示容器 -->
<div id="showCards"></div>

<script>
window.onload = function() {
    // 读取存储的选牌数据，转回JS数组
    const cardList = JSON.parse(localStorage.getItem("userSelectedCards"));
    const container = document.getElementById("showCards");

    // 遍历渲染每张选中的牌
    cardList.forEach(card => {
        const cardItem = document.createElement("div");
        cardItem.innerHTML = `<img src="${card.img}" alt="塔罗牌编号${card.id}">`;
        container.appendChild(cardItem);
    });

    // 如果不需要保留选牌记录，渲染完成后可以清除存储，避免下次进入残留旧数据
    // localStorage.removeItem("userSelectedCards");
}
</script>

可选替代方案 #

如果不想用本地存储，也可以把选中的卡牌ID拼接在跳转URL的参数里，比如跳转到result.html?cards=1,2,4，在结果页解析URL参数拿到ID后再匹配对应卡牌资源。这种方式适合选牌数量少的场景，选牌太多会导致URL过长，不推荐。

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