如何将下拉框选中值存入localStorage并在另一页面显示？当前显示null

我来帮你搞定这个问题！你遇到的显示null的情况，大概率是因为存储逻辑没触发，或者存储/读取的键名不匹配，咱们一步步来修正：

先把你的HTML和脚本补全，确保选中选项时能把值存入localStorage：

<body>
  <label for="select">Gender:</label>
  <select name="select" id="select">
    <option value="0">Select</option>
    <option value="1">Male</option>
    <option value="2">Female</option>
    <option value="3">Other</option>
  </select>

  <script>
    // 获取下拉框元素
    const genderSelect = document.getElementById('select');

    // 监听下拉框的选项变化事件
    genderSelect.addEventListener('change', function() {
      const selectedValue = this.value;
      const selectedText = this.options[this.selectedIndex].text;

      // 你可以选择存储选项值（比如"1"）或者显示文本（比如"Male"），二选一即可
      localStorage.setItem('userGenderValue', selectedValue);
      localStorage.setItem('userGenderText', selectedText);
    });
  </script>
</body>

关键说明： #

• 原来的脚本可能缺少了change事件监听，导致选中选项时根本没触发存储操作，自然在另一个页面读不到数据
• 用明确的键名（比如userGenderText）存储，避免后续读取时键名混乱

在第二个页面中，我们要在页面加载完成后读取localStorage的数据并显示：

<body>
  <h3>您选中的性别：</h3>
  <p id="genderDisplay"></p>

  <script>
    // 页面加载完成后执行读取逻辑
    window.addEventListener('load', function() {
      // 读取存储的显示文本（和第一个页面的键名必须完全一致）
      const savedGender = localStorage.getItem('userGenderText');
      const displayElement = document.getElementById('genderDisplay');

      // 处理无数据的情况，避免显示null
      if (savedGender && savedGender !== 'Select') {
        displayElement.textContent = `您选择了：${savedGender}`;
      } else {
        displayElement.textContent = '还未选择性别';
      }
    });
  </script>
</body>

常见排查点： #

• 确保两个页面在同一个域名下：localStorage是同源限制的，不同域名无法共享数据
• 检查浏览器隐私设置：部分隐私模式会禁用localStorage，切换到正常模式试试
• 核对键名大小写：localStorage的键名是大小写敏感的，比如UserGender和userGender是两个不同的键

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