sessionStorage跨页面传值首次返回null及IE浏览器不兼容问题

安全阿岳

2026-9-27

问题1（首次传值为空/值滞后）解决方案

核心原因：go_to_faq函数内代码执行顺序颠倒
你先执行了window.open触发新页面加载，再执行sessionStorage.setItem存储值。新页面加载完成执行取值逻辑时，存储操作还未完成，因此首次取值为null，第二次点击时才能读取到上一次存储的旧值。
只需要调换两行代码的顺序，先存储值再打开新窗口即可修复：

function go_to_faq(qnum){
  // 先存值，再打开新窗口
  sessionStorage.setItem('key2', qnum);
  window.open('FAQ.html', '_blank');
}

问题2（IE浏览器无法运行）解决方案

核心原因有两个：

IE浏览器在file://本地文件协议下默认禁用sessionStorage，仅支持在http/https服务环境下使用sessionStorage
IE对新标签页的sessionStorage共享逻辑和现代浏览器存在差异，部分版本会隔离不同标签页的sessionStorage，导致跨页读取失败

兼容全浏览器的替代方案

推荐使用URL传参代替sessionStorage传值，兼容性更强，无需考虑storage的跨标签页共享限制，IE全版本支持：

home.html 修改后代码：

function go_to_faq(qnum){
  // 把参数拼接到URL上，encodeURIComponent是为了避免特殊字符乱码
  window.open('FAQ.html?qnum=' + encodeURIComponent(qnum), '_blank');
}

FAQ.html 修改后代码：

// 兼容IE的URL参数解析方法
function getQueryParam(name) {
  name = name.replace(/[\[\]]/g, '\\$&');
  var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
  var results = regex.exec(window.location.href);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

var qpara2 = getQueryParam('qnum');
alert(qpara2);