Skip to content

记录sessionStorage的一个问题

从当前页面我通过 sessionStorage 存储了一个字段,然后打开了一个新页面,结果在新页面中能访问前一个页面的 sessionStorage

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage

在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文,这点和 session cookie 的运行方式不同。

1. 新页面的打开方式决定上下文关联

只有当新页面通过 当前页面主动触发的方式打开 时,才会与当前页面共享 sessionStorage,常见触发方式包括:

  • 通过 window.open('新页面地址') 打开新窗口 / 标签页。
  • 通过表单提交打开新页面。
  • 通过 <a> 标签设置 target='_blank' 并点击打开(需确保无 rel='noopener',否则会切断关联)。

反之,若新页面是 用户手动新建标签页输入地址 或从其他页面跳转而来,则会创建独立的 sessionStorage,无法共享当前页面数据。

2. 浏览器的 “会话关联” 机制

浏览器对 sessionStorage 的隔离规则,并非单纯按 “标签页” 划分,而是按 “会话链” 划分:

  • 当前页面主动打开新页面时,浏览器会将新页面归为 同一 “会话链”,允许两者共享 sessionStorage
  • 这种关联本质是浏览器为 “父子页面”(当前页为父,新打开页为子)保留了临时的会话上下文,让子页面能访问父页面在打开前写入的 sessionStorage 数据。
  • 但需注意:这种共享是 “单向初始化” 的 —— 父页面只能在打开子页面 之前 写入数据,子页面打开后,两者的 sessionStorage 会独立,后续修改互不影响。

made with ❤️ by ankang