如何在两个HTML页面间传递并使用句子编号值？

1. 注册页面（第一个页面）修正方案 #

要确保跳转前成功将数据存入sessionStorage，需在按钮点击时先执行存值逻辑，再手动跳转：

// 绑定按钮点击事件（假设按钮ID为startBtn，句子编号输入框ID为sentenceNumInput，姓名输入框ID为userNameInput）
document.getElementById('startBtn').addEventListener('click', function(e) {
  // 阻止按钮默认跳转/表单提交行为
  e.preventDefault();
  // 获取输入值
  const sentenceNum = document.getElementById('sentenceNumInput').value.trim();
  const userName = document.getElementById('userNameInput').value.trim();
  // 存入sessionStorage
  sessionStorage.setItem('targetSentence', sentenceNum);
  sessionStorage.setItem('currentUser', userName);
  // 手动跳转到第二个页面
  window.location.href = '你的第二个页面路径.html';
});

2. 第二个页面取值与音频加载逻辑 #

在页面加载完成后，从sessionStorage取出数据，加载对应音频：

window.addEventListener('load', function() {
  // 获取存储的句子编号
  const targetNum = sessionStorage.getItem('targetSentence');
  if (targetNum) {
    // 加载对应音频（假设音频元素ID为audioPlayer，音频文件命名规则为sentence_编号.mp3）
    const audioPlayer = document.getElementById('audioPlayer');
    audioPlayer.src = `你的音频目录路径/sentence_${targetNum}.mp3`;
    // 可同时展示用户名
    document.getElementById('userInfo').textContent = `当前用户：${sessionStorage.getItem('currentUser')}`;
  } else {
    // 无有效数据时跳转回注册页面
    window.location.href = '你的注册页面路径.html';
  }
});

关键排查点 #

• 确保两个页面处于同源环境（同一域名、协议、端口），sessionStorage仅在同源页面间共享数据。
• 检查DOM元素ID是否与JS代码中的命名完全一致，避免因元素获取失败导致存值/取值失效。
• 可通过浏览器开发者工具的Application -> Session Storage面板，确认数据是否成功存入。

内容的提问来源于stack exchange，提问作者Amartya Roy Choudhury