a标签新开页面sessionStorage丢失

最新推荐文章于 2023-01-31 17:49:05 发布
最新推荐文章于 2023-01-31 17:49:05 发布
阅读量623 收藏 1
点赞数 1
分类专栏： 前端踩坑 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/falcoliu/article/details/116923353
版权

项目场景：

老项目改造加了登陆验证

问题描述：

a标签新开一个页面应该展示详情却跳到了登陆页

原因分析：

丢失请求头中的token

解决方案：

由于项目开始，前端的一些信息是存在sessionStroage中的，而sessionStroage的作用范围是：只存在于当前会话页面，会话结束后，sessionStroage也会随之销毁
后面在a标签中加入rel=“opener”即可解决

<a target="_blank" href="www.xxx.com" rel="opener"></a>
菜菜我是谁
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
zuoxiaobai#zuo11.com#怎么解决sessionStorage新打开一个tab页就失效的问题1
07-25
1. sessionStorage在浏览器的两个tab页之前是无法共享的，一个tab页中sessionStorage修改后，不能触发其他tab页的storage
sessionStorage
yes_catherine的博客
08-13 427
sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。 测试： 1 页面刷新后是否丢失 答案：不会 2 同一页面在不同tab页是否会相互影响 答案：不会 代码逻辑：每set一次sessionStorage中存储的数字加1 两个tab页完全不影响 ...
vuex配sessionStorage进行自动存储，解决刷新数据丢失的问题。
xh1506101064的博客
12-11 1642
最近在重构以前的老代码，发现上一个前端都是直接用sessionStorage.setItem做的数据存储，对于Vuex也没有做一个持久化的存储，刷新就没了。 于是我对这个重新做了一个处理。 大致是这么想的， 第一点：我想每次修改store里面的数据的时候，sessionStorage就自动存储更新一遍，而不是我手动去更新sessionStroage里面的数据。 我的做法是：使用vuex的 subscribe 订阅。 因为要修改store里面的数据，会调用到mutation 。而subscribe是订阅 st
a标签新窗口打开页面跳转sessionStorage丢失
zhao949895887的专栏
11-13 1377
Chrome更新89版本后，sessionStorage丢失a标签跳转丢失sessionStorage 最简单的解决办法 - a标签添加属性 rel="opener" Chrome对于a标签默认添加了noopener属性，所以通过a标签跳转，会丢失新页面的控制权，sessionStorage自然也就丢失了，我们只需要在a标签上加上 rel="opener" 就行了。 在Chrome浏览器89版本前，当前会话页面指的是当浏览器窗口没有关闭时，窗口内同域网站可以共享此数据（同源浏览器多个窗...
页面间传值 ，本地存储sessionStorage和localStorage
Yblsfls的博客
04-01 2213
页面间传值的方法各有不同，今天学习了一种新的传值方式那就是 ——-sessionStorage 和 localStorage 作为本地储存他们可以用来代替cookie的一部分存储功能，他们比cookie存储量更大。比较实用。本地存储是一个window的属性，包括localStorage和sessionStorage，从名字应该可以很清楚的辨认二者的区别，前者是一直存在本地的，后者只是伴随着sessi
浏览器数据存储方式总结---localStorage、sessionStorage、cookie
yiyueqinghui的博客
10-19 4904
1、cookie 1.1、cookie的作用 说到cookie，其实cookie有两个主要功能， 用于解决http无状态的缺点，在客户端存储会话信息，记录用户的状态 也就是我们现在也经常使用cookie在客户端存储一些数据 1.2、cookie的构成 一般来说，cookie是由浏览器保存的以下几块信息构成的 （1）名称：一个唯一确定cookie的名称 （2）值：存储在cookie中的字符串值，值必须被URL编码 （3）域：cookie对于哪个域是有效的，所有向该域发送的请求都会包含这个cookie信息
Window.sessionStorage存储，实现打开新页面传递
hzp666的博客
01-20 1587
一开始用localStorage，不论打开多少个页面，哪怕关掉重新打开，同一个网站下的存储的数值还在，问题是，不能同时登录多个账户，以及设置过期时间等 后来启用sessionStorage，可以登录多个账户了，页面一关存储的数值也会自动被清掉，不存在安全问题；但来了新的问题，登录后，父页面跳转打开的新页面，两个页面之间的值无法共享了。 后来想了一下，可以利用window.opener来解决，自己写了一个set和get函数，如下： 封装全局函数: function setSession(name,
sessionStorage使用不同方法打开新页面
junjiahuang的博客
08-25 1550
sessionStorage 属性允许你访问一个，对应当前源的 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。 页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。 在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，这点和 session cookies 的运行方式不同。 打.
sessionStorage打开新的标签页数据丢失, 共享数据
Ton555555的博客
08-17 3165
一开始用localStorage，不论打开多少个页面，哪怕关掉重新打开，同一个网站下的存储的数值还在，问题是，不能同时登录多个账户，以及设置过期时间等 后来启用sessionStorage，可以登录多个账户了，页面一关存储的数值也会自动被清掉，不存在安全问题；但来了新的问题，登录后，父页面跳转打开的新页面，两个页面之间的值无法共享了。 后来想了一下，可以利用window.opener来解决，自己写了一个set和get函数，如下： 封装全局函数: function setSession(name, valu
sessionStorage详解
IO14122的博客
01-31 2774
sessionStorage 是HTML5新增的一个临时会话存储对象，本文介绍了sessionStorage的详细属性和方法，以及适用场景。帮助大家更好的理解！
HTML5 使用 sessionStorage 进行页面传值的方法
09-28
主要介绍了HTML5 使用 sessionStorage 进行页面传值的方法的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
01-21
我这里使用sessionStorage，这里需要注意的是vuex中的变量是响应式的，而sessionStorage不是，当你改变vuex中的状态，组件会检测到改变，而sessionStorage就不会了，页面要重新刷新才可以看到改变，所以应让vuex中的...
使用JS获取SessionStorage的值
10-18
给大家介绍了使用js获取sessionstorage中的值，首先获取它是为了将获得的信息输出或者alert（),其次，在静态页面中，如果使用sessionStorage就相当于在动态页面里连接了数据库一样，具体内容详情大家参考下本
复制打开新页面sessionStorage存储的信息仍然存在
qq_28584841的博客
07-27 2145
信息存储在sessionStorage中，鼠标停留在当前网页的tab处，右键复制打开新窗口页面，新页面sessionStorage中存储的信息跟原页面一致。 只有复制原网址打开新页面，粘贴转到打开的新页面是没有sessionStorage信息的。 ...
右键打开新的标签页，sessionStorage失效
旺旺
03-30 3975
项目场景： 所有人都知道，localStorage和sessionStorage的最大区别是生命周期，一个永久，一个仅针对一个会话期间有效。那么，到底什么是一个会话？多个标签页之间的数据是否会共享呢？ 问题描述： 在今天开发的项目中，有一个需求，需要在a页面通过target="_blank"跳转打开一个新的标签页b，在跳转的过程中，需要把a页面相关的信息通过缓存传到b页面，通过使用sessionStorage实现，不过在跳转之后发现sessionStorage为空，为什么sessionStorag.
使用sessionStorage新建与本页面一样的Tab页面，并在页间传递参数。
Knight_Ren的博客
07-29 1131
客户提了个需求，点击某个链接，新建一个Tab页，当前页面内容不变，新的Tab页中控件的值和当前页一致。 查阅了相关博客，发现可以用sessionStorage或者localStorage实现，键值对属性的存储，获取。 Demo实现思路：页面加载时使用sessionStorage的getItem（）方法取值，在点击跳转的时候给sessionStorage存值。 一下时Demo代码： &lt...
不同tab页sessionStorage共享情况
Lee_01的博客
05-20 3397
不同tab页sessionStorage共享情况 判断不同tab是否属于同个会话，看tab的打开方式： 手动新开一个标签页，会创建新的 session 通过点击链接，会创建新的 session 用 window.open 打开的新标签跟原标签页是属于同一个 session 测试代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>不同
D3.js实现知识图谱（删除，隐藏，展开）
菜菜我是谁的博客
01-06 7870
D3.js实现知识图谱（隐藏/删除/展开 ）
SessionStorage
最新发布
07-28
SessionStorage是用于在浏览器会话期间存储数据的一种机制。它与LocalStorage类似，但有一些区别。SessionStorage中存储的数据只能在同一个会话中的页面中访问，并且在会话结束后会被清除。与LocalStorage不同，SessionStorage的数据在页面刷新或恢复页面时不会丢失或被清空。\[1\]\[2\]另外，SessionStorage在不同的浏览器标签页之间是不共享的，即使是相同的URL。而Cookie、LocalStorage在所有同源窗口之间是共享的。\[3\]总的来说，SessionStorage提供了一种在浏览器会话期间临时存储数据的方式，适用于需要在同一个会话中的页面之间共享数据的场景。 #### 引用[.reference_title] - *1* *2* *3* [cookie 、sessionstorage 、localstorage三者的区别](https://blog.csdn.net/weixin_45541388/article/details/125367823)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值