a标签打开新页面sessionStorage丢失

市场反馈用户登录后点击链接提示重新登录,检查发现是sessionStorage丢失。介绍了sessionStorage作用范围,指出谷歌、火狐等浏览器对其设置变化。给出解决方法,如在a标签添加rel=“opener”,也可使用js的window.open()或更换存储方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近突然市场反馈用户登录后点击链接提示重新登录,检查后发现是sessionStorage丢失,原代码是这样的:

<a target="_blank" href="www.XXXXX.com" ></a>

首先先说一下seeionStorage:
sessionStorage作用范围:只存在于当前会话页面,当会话结束后,数据也随之销毁,在不同的浏览器窗口中共享。也就是存在于当前浏览器页面,页面关闭,数据也会删除。(注意:通过鼠标右键打开的新标签无法共享sessionStorage)

经过各种查资料发现:谷歌、火狐等浏览器在之前是 当浏览器窗口没有关闭时,窗口内同域网站可以共享此数据(同源浏览器多个窗口不共享),当页面全部关闭或窗口关闭后,sessionStorage数据会被摧毁,所以你用a标签跳转还是js跳转都会共享sessionStorage。
但是现在他们把sessionStorage设置为正经的单页面使用。
说正经的到底怎么改才能还跟以前一样,同一个窗口公用sessionStorage呢其实很简单:

**只需要将a标签中添加 rel=“opener” **就能解决

**只需要将a标签中添加 rel=“opener” **就能解决

**只需要将a标签中添加 rel=“opener” **就能解决

<a target="_blank" href="www.XXXXX.com" rel="opener"></a>

这样就好了

还可以使用js
window.open()

或者干脆就换存贮方式

好了就介绍这么多

### 如何在 Google Chrome 浏览器中正确查看已存储的 `sessionStorage` 数据 #### 打开开发者工具 为了访问和检查 `sessionStorage` 中的数据,在 Chrome 浏览器里需先启动开发者工具。这可以通过按下键盘上的 F12 键或者右键点击页面任意位置选择“检查”来实现。 #### 导航至 Application 面板 一旦打开了开发者工具面板,找到顶部菜单栏中的 "Application"[^1]。此选项卡提供了多种资源视图,包括但不限于 Cookies, Local Storage 和 Session Storage。 #### 查看 Session Storage 内容 进入 Application 后,默认会显示当前站点的信息。左侧边栏列出了该域名下的各种存储类别;从中定位到 **Session Storage** 并展开以浏览具体条目。这里展示的就是特定于当前浏览器标签页内的 session 存储项及其对应的 key-value 对。 如果未能看到预期的 `sessionStorage` 记录,则可能是由于以下原因造成: - 数据仅存在于另一个不同的浏览器实例或标签页内; - 页面尚未执行任何向 `sessionStorage` 添加数据的操作; - 用户行为触发了新的导航动作(比如通过 `<a>` 标签),导致原有上下文丢失而使得 `sessionStorage` 清除[^3]。 对于最后一种情况,可通过调整链接属性设置解决,例如使用带有适当参数的目标空白链接 (`target="_blank"` 加上 `rel="opener"`) 来保持原窗口状态不变,进而保留其关联的 `sessionStorage` 值。 ```html <a href="${options.url}" target="_blank" rel="opener">Link Text</a> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值