能否在浏览器中临时存储数据实现页面跳转后的跨页面数据传递

页面跳转后，A页面的JS执行上下文会被浏览器完全销毁，B页面无法直接访问A页面定义的函数、变量，所以原有写法不可行。postMessage确实仅适用于两个页面同时存活的场景（如iframe嵌套、新开弹窗），不适用跳转场景，可选用以下三种方案实现需求：

方案1：使用sessionStorage（临时存储场景最优推荐） #

sessionStorage是浏览器标签页级别的临时存储，标签页关闭后数据会自动清空，不会永久残留，适配你的临时存储需求。

• 页面A修改后代码：

function a(){
  return "helloWorld"
}

function changePage(){
  // 写入临时存储
  sessionStorage.setItem('tempMsg', a())
  // 修正跳转写法，window.location为对象，赋值href属性实现跳转
  window.location.href = 'b.html'
}

• 页面B代码：

// 读取临时存储的数据
const msg = sessionStorage.getItem('tempMsg')
console.log(msg)
// 用完后可手动删除，避免残留冗余数据
sessionStorage.removeItem('tempMsg')

方案2：URL参数拼接（适合短数据、无敏感信息的场景） #

直接把要传递的参数拼接在跳转地址后面，B页面解析URL即可拿到数据，无需走存储逻辑。

• 页面A修改后代码：

function a(){
  return "helloWorld"
}

function changePage(){
  // encodeURIComponent用于处理特殊字符避免传值异常
  const msg = encodeURIComponent(a())
  window.location.href = `b.html?msg=${msg}`
}

• 页面B代码：

const urlParams = new URLSearchParams(window.location.search)
const msg = urlParams.get('msg')
console.log(msg)

该方案缺点为数据长度受浏览器URL长度限制，且内容会明文展示在地址栏，不适合敏感数据和长文本传递。

方案3：localStorage（适合需要跨标签页生效、长期留存的场景） #

用法和sessionStorage完全一致，仅需把代码中的sessionStorage替换为localStorage即可，区别是localStorage除非手动删除，否则会永久保存在浏览器中。

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