谷歌浏览器A标签跳转新标签导致sessionStorage无效

最新推荐文章于 2023-09-15 17:08:46 发布
最新推荐文章于 2023-09-15 17:08:46 发布
阅读量1.1k 收藏 2
点赞数 3
分类专栏： BUG 文章标签： chrome web bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34088376/article/details/114997944
版权

前两天，有人提出BUG，说点击详情页会跳转到登陆页，但是别人的又是正常的。自己试验了一番，发现换了最新的谷歌浏览器（版本 89.0.4389.90）之后，确实点连接会跳转到登陆页。

debug发现，请求头token为空，网上去查资料，这才发现是 谷歌浏览器的版本问题，详情见https://stackoverflow.com/questions/66473527。

大致原因是，谷歌浏览器 89版本之后，对_blank的跳转行为做了限制，主动添加了 rel =“ noopener”属性，导致新页面不共享旧页面的sessionStorage。

解决方法：主动添加 rel="opener" 属性即可，如下。

<a href="#" rel="opener" target="_blank">跳转</a>

 

湘西向顶天
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
a标签新窗口打开页面跳转sessionStorage丢失
zhao949895887的专栏
11-13 1475
Chrome更新89版本后，sessionStorage丢失a标签跳转丢失sessionStorage 最简单的解决办法 - a标签添加属性 rel="opener" Chrome对于a标签默认添加了noopener属性，所以通过a标签跳转，会丢失新页面的控制权，sessionStorage自然也就丢失了，我们只需要在a标签上加上 rel="opener" 就行了。 在Chrome浏览器89版本前，当前会话页面指的是当浏览器窗口没有关闭时，窗口内同域网站可以共享此数据（同源浏览器多个窗...
sessionStorage 、localStorage
weixin_46041322的博客
03-03 718
相同点： 1.localStorage和sessionStorage都是用来存储客户临时信息的对象。 2.他们均只能存储字符串类型的对象 区别： 1.localStorage生命周期是永久，除非用户在浏览器提供的UI上清空 2.sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通 过sessionStorage存储的数据也就被清空了。 3.不同的浏览器无法共享localStorage或sessionStorage中的信息...
JS通过a标签跳转到新的页面，在子页面刷新父页面方法
最新发布
qq_47189438的博客
09-15 802
通过a标签跳转新的页面，在子页面（跳转后页面）执行某操作后刷新父页面（跳转前页面），关闭子页面。
解决右键打开新的标签页，sessionStorage失效。
yydsddz的博客
07-04 601
/ 这个调用能触发目标事件，从而达到共享数据的目的。// 已存在的标签页会收到这个事件。// 新开启的标签页会收到这个事件。// 页签共用sessionStorage。
右键打开新的标签页，sessionStorage失效
旺旺
03-30 4230
项目场景： 所有人都知道，localStorage和sessionStorage的最大区别是生命周期，一个永久，一个仅针对一个会话期间有效。那么，到底什么是一个会话？多个标签页之间的数据是否会共享呢？ 问题描述： 在今天开发的项目中，有一个需求，需要在a页面通过target="_blank"跳转打开一个新的标签页b，在跳转的过程中，需要把a页面相关的信息通过缓存传到b页面，通过使用sessionStorage实现，不过在跳转之后发现sessionStorage为空，为什么sessionStorag.
HTML5新增加标签和功能概述
01-19
 绘画CANVAS; 用于播放媒体的video和audio元素； 本地离线存储localstorage长期存储数据，浏览器关闭后数据不...sessionstorage的数据在浏览器关闭后自动删除； 语义化更好的内容元素如：article、footer、heade
HTML5的标签的代码的简单介绍 HTML5标签的简介
09-28
例如，如果你经常处理多媒体内容，那么`<audio>`、`<video>`和`<canvas>`标签将是你关注的重点；如果你的工作涉及到数据分析和展示，`<table>`的增强功能和新的表单控件可能会成为你日常使用的工具。 总的来说，...
vue实现多标签保持页面管理系统演示项目demo
07-22
4. **多标签页管理**：项目中可能会有一个专门的组件来管理这些标签，比如添加新标签（创建新的Vue组件实例并添加到Vue Router的路由列表中）、关闭标签（从路由列表中移除对应的路由，并更新Vuex中的状态）、切换...
html5api最新html标签
05-24
2. `Web Storage`：包括`localStorage`和`sessionStorage`，提供比传统cookie更大的存储空间，用于在本地存储数据。 3. `Web Workers`：创建后台线程，使复杂的计算不会阻塞浏览器主线程，提升网页性能。 4. `...
HTML5中的新标签
03-15
以下是一些HTML5中的关键新标签及其用途： 1. `<nav>`：用于定义页面的主要导航链接部分，帮助搜索引擎和辅助技术理解页面的主要导航结构。 2. `<header>`：表示页面或区域的头部，通常包含logo、导航链接、搜索...
Chrome更新89版本后，sessionStorage丢失a标签跳转丢失sessionStorage
liu940107600的博客
03-18 1674
localStorage作用范围：本地存储，关闭浏览器后，数据依然会保存。同源浏览器窗口可以共享使用localStorage存储的数据。 sessionStorage作用范围：只存在于当前会话页面，当会话结束后，数据也随之销毁，在不同的浏览器窗口中共享。也就是存在于当前浏览器页面，页面关闭，数据也会删除。（注意：通过鼠标右键打开的新标签无法共享sessionStorage） 而这块对于sessionStorage可能一直存在一个误区，在Chrome浏览器89版本前，当前会话页面指的是当浏览器..
a标签下载特殊字符url手动编码浏览器兼容性不显示
qq_27161847的博客
10-26 448
a标签下载特殊字符url手动编码浏览器兼容性不显示 URL字符转义编码 空格 URL中的空格可以用+号或者编码 %20 / 分隔目录和子目录 %2F ? 分隔实际的URL和参数 %3F % 指定特殊字符 %25 & URL 中指定的参数间的分隔符
部分样式在360和ie上不能显示_掌握这些技巧，让你手机上的Chrome更好用
weixin_39891272的博客
11-03 294
Chrome是全球范围流行的浏览器应用，尤其是桌面端，占据了浏览器市场的大半壁江山。尽管移动端的Chrome不似桌面版那样强大，但它也隐藏了大量的功能，不被用户所熟知，甚至在一些隐藏功能开启之后，我们会发现，手机端的Chrome远比我们想象中的强大，好用。下面是收集的一些功能技巧，以供大家参考。主页样式默认状态下，Chrome的主页是上图左边这种，只有一个主页按钮在页面的左上角。经常使用Chrom...
<JavaScript>window对象学习（二）window.open()、close()方法，以及有时只能打开新标签页而无法打开新窗口的原因
weixin_45797022的博客
03-26 1433
window.open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。 方法格式： window.open(URL,Name, Configuration) URL 要新打开页面的URL，如果没有指定URL，打开一个新的空白窗口 Name 为新打开窗口的名字，可以通过此名字获取该窗口对象，当然新打开窗口的名字除了可以是自定义的值以外，还可以是以下几个值，与超链接a的target属性值相...
WebView页面中<a>标签是target="_blank"时创建新窗口无响应
GeofferySun的专栏
03-15 4376
如果WebView页面中链接的&lt;a&gt;标签是target=”_blank”，而你的WebView又没有做任何处理，这个时候就会点击无效的状况，是不是很莫名其妙？target由多个定义类型_blank：表示将链接打开新窗口_self:表示在目前窗口或框架里打开链接（默认的）_parent:表示在父窗口或框架里打开链接_top:表示在顶层框架里打开新链接另外还可以直接把框架名称指定给targ...
解决a标签下载文件token验证问题
h_bugwriters的博客
03-26 3100
1.下载文件 let url = “localhost:8010/download” var xhr = new XMLHttpRequest(); //定义http请求对象 xhr.open("GET", href, true); xhr.setRequestHeader("token", 'ababababababab'); xhr.send(); xhr.responseType = "blob"; // 返回类型blob xhr.onload = function() { var .
a标签属性 rel=noopener noreferrer
Love Code
07-03 5281
当你浏览一个页面点击一个a标签链接跳转到另一个页面时，&lt;a href="http://www.baidu.com" target="_blank"&gt;百度&lt;/a&gt;在新打开的页面（http://www.baidu.com）中可以通过 window.opener 获取到源页面的部分控制权，即使新打开的页面是跨域的也照样可以（例如 location 就不存在跨域问题）。rel=no...
关于a标签的rel=nooppener
摇摆小仙的博客
10-25 887
刚刚看到了一个前端方面的问题 html的a标签属性rel="noopener"有什么作用？ a标签用了这么久也没见过这个玩意儿, 真是惭愧, 所以特意研究了一下,写在这里作为笔记吧. 首先, rel=noopener 和 rel= noreferrer 这两个属性是为了解决安全性问题 当你使用 target=_blank 打开一个新的标签页时, 新页面的 window 对象上有一个属性 ope...
a 标签 设置sessionStorage和localStorage
08-20
要在a标签中设置sessionStorage和localStorage，你可以使用JavaScript的事件监听器来捕捉a标签的点击事件，并在事件处理程序中设置sessionStorage和localStorage的值。以下是一个示例代码： ```html <a href="#" id="myLink">点击我设置sessionStorage和localStorage</a> <script> // 获取a标签元素 var myLink = document.getElementById('myLink'); // 绑定点击事件监听器 myLink.addEventListener('click', function() { // 设置sessionStorage sessionStorage.setItem('key', 'value'); // 设置localStorage localStorage.setItem('key', 'value'); }); </script> ``` 在上述代码中，我们首先通过`document.getElementById('myLink')`获取了id为"myLink"的a标签元素，并将其赋值给变量`myLink`。然后，我们使用`addEventListener`方法为a标签绑定了一个点击事件监听器。在监听器的处理函数中，我们设置了sessionStorage和localStorage的值。 当用户点击a标签时，会触发点击事件监听器中的处理函数，从而设置了sessionStorage和localStorage的值。 希望这个示例对你有帮助！如果你还有其他问题，请随时向我提问。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值