前端同一个浏览器不同tab页，某一tab页执行退出操作，刷新剩余的tab页时，用户呈现退出状态

最新推荐文章于 2024-01-06 14:42:14 发布
最新推荐文章于 2024-01-06 14:42:14 发布
阅读量2.7k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： 浏览器相关知识
本文链接：https://blog.youkuaiyun.com/qq_32766999/article/details/97629869
探讨了在同一个浏览器的不同标签页中，当一个页面执行退出登录操作后，其他页面的登录状态如何同步的问题。涉及session和sessionStorage在跨Tab页的数据共享机制。

业务场景：

(前提是同一个浏览器页面1与页面2都处于登录同一个百度账号状态)我执行页面1中的，百度账号退出登录操作，然后接下来我去刷新页面2，此时发现页面2也是退出登录状态

在同一个浏览器不同的tab页，共用一个session，

当你在1点击退出之后，后端让session失效，

在2刷新就会出现退出登陆的状态

此场景牵涉到一个问题就是

sessionstorage不会在同一浏览器的不同tab进行共享数据，

localstorage会在同一浏览器的不同tab共享数据

此时在页面2进行刷新，后端会返回一个401状态码

 

前端面试题
IT_Jiangxiaobai的博客
05-19 5613
01-HTML~02-CSS 1.每个HTML文件里面都有一个很重要的东西，Doctype，知道这是干什么的么？ 要点一 : 该标签告知浏览器浏览文档要使用的HTML规范 , 告知浏览器以何种规范解析页面 要点二 : 声明对大小写不敏感 2.常用浏览器有哪些，内核都是什么？ 答： 常用浏览器有chrome、safari、 IE、火狐(firefox) 、 Opera 、360、搜狗等 浏览器 内核 备注 IE Trident IE、猎豹安全、360极速浏览器、百度浏览器 firefo
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）
m0_55613022的博客
02-24 3544
HTML和Css部分 1、对BFC规范（块级格式化上下文）的理解 BFC 块级格式化上下文 一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。 怎么触发BFC 1. float的值left或right 2. overflow的值不为visible（默认） 3. display的值为inline-block、table-cell、table-caption 4. position的值为absolute（绝对定位）或f
Meteor：关闭所有tab时退出登录
CBY2016的博客
01-05 202
功能描述：在浏览器退出时（所有tab关闭时）退出登录 需求来源：支持类似传统网页登录时的remember me选项 背景：Meteor应用中，用户登录后，会在浏览器的localStorage保存resume token， 所以下次再使用该浏览器打开同一meteor应用时，会自动登录。有时，我们希望应用支持在浏览器退出时（所有tab关闭时）即退出登录，然而meteor被没有对这项功能的...
EasyUi 关闭一个tab选项卡后，跳到另一个选项卡，并刷新这个选项卡中的数据表格
狼魂之力
06-30 574
aa
easyui tabs 一个窗口修改完成后刷新另一个窗口
abc9787126的博客
11-28 552
在一个tab中添加或删除数据后，要改变主页（相当于链接的另一个tab）的内容： 1、在要刷新的窗口的初始化中添加 js 刷新方法，并保存到 window.top 中 　　window.top["Refresh_CloudHomePage_Content"] = function () {　　　　window.location.reload();　　} 2、在主页添加刷新方法 　　...
web端同一账户同时登陆踢掉前一个登录的用户
墨水直达的博客
06-09 3813
这边我们理想是使用localstorage去存取用户登录信息，因为是保存在客户端本地，无需访问服务器，且可实现永久保存，节省网络流量 关于cookie和session和storage的详细解说网址： https://www.cnblogs.com/pengc/p/8714475.html 而登录的当前时间（具体到秒）+userid作为用户的登录标识（本来想使用mac作为用户登录的唯一标识，但...
如何实现多 Tab 同步登陆和退出
fang_my的博客
06-30 1152
在真正的项目上，其实我还实现了从最后一张到第一张，或者从第一张到最后一张的无缝切换，但是讲解起来稍微有点复杂，会让文章变得冗长。所以计划本文只是讲解基础框架，如果有读者希望学习思路的话，我会在之后更新相关知识点🎁。
制作简单网页要求1.登录及验证 2.轮播图 3.下拉菜单 4.倒计时 5.tab栏 6.固定导航栏 7.留言板 8.购物车(包括商品的添加、删除、结算等) 9.退出登录
最新发布
12-29
定义好结束时间戳之后计算剩余秒数，并每隔一秒刷新一次 DOM 中的时间展示。 ```javascript const deadline = new Date("December 25, 2023 00:00:00").getTime(), timerElement = document.getElementById('...
【微信小程序页面刷新策略】：深度剖析TabBar性能优化技巧
微信小程序作为一种流行的移动应用开发方式，其页面刷新机制和TabBar性能直接关系到用户体验。本文从页面刷新机制概述入手，深入分析TabBar性能问题及其影响，并探讨了优化理论与实践方法。通过对计算资源、内存管理...
WEB 前端面试题 （实战）（大全）
m0_64191440的博客
02-07 2182
JavaScriptJS匿名函数就是没有名称的函数匿名函数在项目中主要有两种操作方式第一种形式就是将一个函数当成另一个函数的参数进行使用；// 用户单击的时候执行的操作})第二种形式就是将一个匿名函数赋值给变量进行调用，函数的一种声明方式自执行函数，就是函数在声明完成的同时就会立即执行的函数！自执行函数的特点是声明之后立即执行、只能在创建的同时执行一次无法再次调用执行自执行函数通常都是给网页初始化网页特效或者准备初始数据！;(function(){…}()) 使用较多;
浏览器多标签页登录身份刷新
Windeal
09-18 2100
欢迎关注我的主页 blog.lipeilun.com 背景 用户在浏览器打开一个标签页Tab1， 登录身份A 在同一个浏览器中，另外打开一个标签页Tab2重新登录身份B。 如果没有做特别处理，切回Tab1时，看到时依然时身份A的信息。 由于浏览器共享cookie， 后台等登录态已经切换为身份B。 这时在Tab1等操作，实际上是操作的是身份B的数据。 这显然是不合理的 通常合理的做法是，在切回T...
一个页面崩溃，其他页面也跟着崩溃
Gaozhengw的博客
03-27 716
一个页面崩溃，其他页面也跟着一起崩溃的原因
浏览器的cookie，localStorage,sessionStorage区别
CaseyWei
02-18 281
浏览器的cookie，localStorage,sessionStorage区别 localStorage,sessionStorage,cookies都是客户端存储的解决方案 1、localStorage和sessionStorage的声明周期 localStorage和sessionStorage都是用来存储客户端临时信息对象，他们只能存储字符串类型的对象，所以我们想要存储其它类型的数据，不...
vue实现多个tab标签页的切换与关闭
热门推荐
苏苏就是小苏苏的博客
03-06 1万+
1.实现效果 2.实现原理 vuex，实现对当前激活项，当前tab列表，当前tab的translateX，当前缓存页，当前路由的状态管理。 将vuex中的数据保存到sessionStorage中，避免页面刷新丢失，当浏览器关闭时，清空数据。 通过ref定位，拿到当前窗口宽度与当前所在路由的tab标签的所有宽度，判断两者，实现对多tab超出窗口宽度的处理。 当点击tab标签页的时候，获取相应的激活项，动态的实现左侧菜单栏的选中状态，用watch监听，updateActiveName和upda
vue多tab页面全部关闭后自动退出登录
weixin_45042868的博客
01-06 1376
业务场景：主项目是用vue写的单页面应用，但是有多开页面的需求，现在需要在用户关闭了所有的浏览器标签页面后，自动退出登录。思路：因为是不同的tab页面，我只能用localStorage来通信，新打开一个标签页（页面初次装载时），我就往数组中加一个页面，在（页面关闭或刷新等）页面卸载时移除它。这样就只需要在页面装载时（load事件）判断当前是不是刷新页面就可以了，只要是其他来源就直接登出。
同一浏览器、同一域、同一时间、多个页面选项卡共用同一session，区分不同页面选项卡的解决方法
wangshuo0407的博客
06-16 9867
在web开发中，session机制常常用于区分用户身份，但session也有无能为力之处，设想一个情形：     【多个用户】分别使用【不同选项卡页面】在【同一会话时间】公用【同一】浏览器，【登录同一应用】，此时服务端使用session将【无法区分】不同选项卡页面。      注意，是同一电脑的同一浏览器不是不同浏览器。     这个情形可能存在吗？当然可能，比如一个
前端跨页面通信
qq_40652104的博客
04-20 2047
什么是前端跨页面通信 在浏览器中，我们同时打开多个tab页，每个tab页可以粗略的理解为一个独立的运行环境，即使是全局对象也不会在多个tab间共享。然后我们希望这些独立的tab页之间同步数据、信息或状态。 比如：我们同时打开了列表页和a的详情页，在列表页对a的状态进行操作后，我们切到详情的tab页，在不进行刷新页面时，要怎么把在列表页操作后的状态同步过来？ Broadcast channel BroadcastChannel 接口代理了一个命名频道，可以让指定 origin 下的任意 browsing co
同一浏览器下多用户登录问题解决
shidouyu的专栏
08-05 7592
问题：在如果在同一个浏览器下只有一个用户登录的情况，在服务端可以使用 Session 存储用户登录信息。但是在项目中如果需要在同一个浏览器下允许多个不同的用户登录，这样做会存在问题，因为服务端区分不同用户是通过 Cookie 中存储的 JSESSIONID 区分的，如果 JSESSIONID 相同，那么他们在服务端将会使用同一个 Session 对象。而同一浏览器使用的 Cookie 是相同的， 从而 JSESSIONID 也是相同的，无法区分不同的用户。当浏览器登录第一个用户后，用户信息写入到 Ses..
AngularJS中实现页面切换不刷新的Tab页技术
- **刷新页面，保留已经打开的tab页：** 即使刷新浏览器，用户之前打开的tab页及其数据状态能够被保留，这对于单页应用来说非常重要，因为刷新通常会导致SPA重新初始化，丢弃所有状态信息。 - **使用嵌套路由，实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值