如何为JavaScript开发的猜歌盲测游戏制作跨页数据一致的答案页

你可以通过以下三种常用方案解决跨页数据同步的问题：

方案1：使用URL查询参数传递标识 #

• 第一步：直接用歌手姓名作为唯一标识，游戏页随机选中歌手后，跳转答案页时把标识拼在URL后：

// 游戏页跳转逻辑
const ChansonHasard = MesChansons[Math.floor(Math.random() * MesChansons.length)]
// 跳转时带参数，特殊字符编码避免乱码
window.open(`answer.html?singer=${encodeURIComponent(ChansonHasard.chanteur)}`)

• 第二步：答案页加载时读取URL参数，匹配对应歌手数据渲染：

// 答案页逻辑，MesChansons数组和Chanson构造函数在答案页保留一份即可
const params = new URLSearchParams(window.location.search)
const currentSinger = decodeURIComponent(params.get('singer'))
const ChansonHasard = MesChansons.find(item => item.chanteur === currentSinger)
// 之后正常渲染所有歌名即可

方案2：使用本地存储传递完整数据 #

不需要修改URL，直接用sessionStorage临时存储当前选中的歌手数据，页面关闭后数据会自动清除，不会残留冗余内容：

// 游戏页选中歌手后存入
const ChansonHasard = MesChansons[Math.floor(Math.random() * MesChansons.length)]
sessionStorage.setItem('currentSinger', JSON.stringify(ChansonHasard))

// 答案页读取解析
const ChansonHasard = JSON.parse(sessionStorage.getItem('currentSinger'))
// 直接渲染即可

方案3：取消跨页跳转，当前页直接展示答案 #

这是开发成本最低的方案，不需要处理跨页传值问题：

• 提前写好答案展示的DOM结构，默认设置display: none隐藏
• 点击查看答案按钮时，隐藏游戏区的遮罩层和交互元素，直接用已经加载好的当前歌手数据渲染展示答案即可

附加优化建议 #

你当前的构造函数需要传10个歌名参数、渲染时要写10条DOM赋值语句，后续可以优化为用数组存储歌曲列表，循环渲染，减少冗余代码：

// 优化后的构造函数
function Chanson(chanteur, titres) {
  this.chanteur = chanteur
  this.titres = titres // 直接传入10首歌的数组
}
// 实例化示例
let Sardou = new Chanson("Michel Sardou", ["Les lacs du Connemara", "Je vais t'aimer", "La maladie d'amour", /* 其余歌曲依次放入数组 */])
// 渲染时循环赋值
ChansonHasard.titres.forEach((titre, index) => {
  document.querySelector(`p.t${index+1}`).innerHTML = titre
})

内容的提问来源于stack exchange，提问作者Frederic Sanchez Pro