使用localStorage进行跨标签页通讯

最新推荐文章于 2024-04-03 12:23:40 发布
最新推荐文章于 2024-04-03 12:23:40 发布
阅读量2.6k 收藏 5
点赞数
分类专栏： 前端知识合集 文章标签： localStorage 跨标签页通信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BAOBAB_cc/article/details/79566183
版权
本文介绍了如何使用localStorage进行跨标签页通讯。讲解了localStorage与sessionStorage的区别，重点阐述了通过监听storage事件来实现在同源页面间的通信，并探讨了localStorage的局限性——仅限于同源策略。通过一个具体的情景描述——用户登录状态在多个标签页间的同步，以及配套的A.html和B.html页面的demo展示，详细解释了该技术的应用。
摘要由CSDN通过智能技术生成

localStorage API

什么是localStorage

提起localStorage，往往还牵扯到sessionStorage，它们都是web Storage的API，表示浏览器端数据存储。而区别是，sessionStorage会随着页面的关闭而销毁，localStorage则可永久存储。

标签页间通讯

localStorage的增删改，都会触发其storage事件，通过监听这个事件，控制它的值进行页面通讯。

localStorage的局限

只适用与同源页面，也就是协议，端口，域名相同的页面。

情景描述

用户在网站 A页面 中登录，在B页面退出，A页面与B页面的登录状态保持一致。

demo展示

  • 使用node.js构建服务器，确保A、B页面不违背同源策略

  • A页面默认登录状态，在B页面退出登录时，A页面也退出登录

A.html

<!DOCTYPE html>
<html
最低0.47元/天 解锁文章
javascript父子页面通讯实例详解
10-23
- 父页面可以通过`window.frames[index]`或`window.frames["frameName"]`获取子页面的`Window`对象，其中`index`是子页面在`frames`数组中的位置，`frameName`是子页面`<iframe>`标签的`name`属性值。获取到`Window...
java按钮触发另一个页面_前端跨页面通信，你知道哪些方法？
weixin_39948309的博客
11-24 958
戳蓝字「前端技术优选」关注我们哦！引言在浏览器中，我们可以同时打开多个Tab页，每个Tab页可以粗略理解为一个“独立”的运行环境，即使是全局对象也不会在多个Tab间共享。然而有些时候，我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。正如下面这个例子：我在列表页点击“收藏”后，对应的详情页按钮会自动更新为“已收藏”状态；类似的，在详情页点击“收藏”后，列表页中按钮也会...
sessionStorage
purple_lumpy的博客
10-10 430
sessionStorage 会话存储     sessionStorage 是HTML5新增的会话存储对象，用于临时保存同一窗口（标签页）的数据，在关闭窗口或标签页之后将会删除这些数据。     在JS中，可以通过window.sessionStorage 或者 sessionStorage 调用此对象。   sessionStorage 对象的特点   1）同源策略限制      ...
js 同源页面间通信 storage 和跨域页面间通信 postMessage
haogemr的博客
09-08 4422
同源页面间通信，storage事件监听介绍使用扩展跨域页面间通信 postMessage介绍使用安卓平台差异化处理安全问题 同源页面间通信，storage事件监听 参考博客：h5 storage事件监听 介绍 当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件，就会触发，所以满足触发监听的条件有三个： 同一浏览器打开了两个同源页面 其中一个网页修改了localStorage 另一网页注册了storage事件 注意：在同一个网页修改本地存储，又在同一个网页监听，.
多tab之间的sessionStorage能不能直接共享访问？
山有木兮木有枝 心悦君兮君不知
07-06 975
sessionStorage能不能共享？
利用localStorage事件来跨标签页共享sessionStorage
liudanyang_21的博客
06-29 691
//干货 利用localStorage事件来跨标签页共享sessionStorage //因为cookie保存字节数量有限，很多童鞋考虑用html5 storage来保存临时数据，Sessionstorage就比较适合来保存临时数据了。 //但有个问题呵：Sessionstorage:不支持跨标签页共享数据，就是说Sessionstorage只在同一个页面内有效，即使同一域名，新打开一个tab窗口，也是不能共享Sessionstorage的。 //那么有没有办法呢，那是有的.... //原理是运用了Eve.
10-网页多标签通讯.md
03-31
对于多标签页通讯而言，服务端只需要发送一次消息，所有监听的标签页都能接收到更新。WebSocket具有跨域的优势，适用于需要实时通信的场景。由于需要服务端的参与，这就意味着需要配置相应的服务器端逻辑以支持...
idrt:我没有重建标签页
05-26
"IDRT: 我没有重建标签页" 是一个与JavaScript相关的项目，主要目的是为了在基于Web的消息传递应用程序（如即时通讯软件或者单页应用）中实现数据恢复和状态保存功能。IDRT，全称为"Idling Detection and Resume Tab...
H291_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-02
5. **Canvas**：元素是HTML5中的画布，允许开发者使用JavaScript进行动态图形绘制，如游戏、图表、动画等。 6. **SVG**：Scalable Vector Graphics（可缩放矢量图形）是一种基于XML的图像格式，用于创建高质量的...
html 仿qq登录页面
07-22
可以使用`class`或`id`选择器来对特定元素进行样式定制。 - 使用`display: flex`或`grid`布局可以轻松实现元素的对齐和排列，使其在不同屏幕尺寸下保持良好的响应性。 - 背景图片和颜色搭配可以营造出QQ特有的品牌...
同一个网站，两个标签页使用localStorage进行实时通信
不会java的java程序员
12-20 490
同一个网站，不同标签页进行通信。常见场景就是数据列表和新增页面在不同标签页，新增完数据后又想要数据列表页面进行实时刷新。
京东一面：浏览器跨标签页通信的方式都有什么？
最新发布
程序员成长指北
04-03 92
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群跨标签通信也有很多实际的应用场景，比如：共享登录状态：当用户在一个标签页中登录后，其他打开的标签页需要及时获取到登录状态，以保持一致的用户体验。在这种情况下，可以使用浏览器的localStorage或sessionStorage来存储登录状态，并通过监听storage事件来实现不同标签页之间的状...
VUE中使用localStorage实现跨标签页面的通信
gdutRex的博客
10-22 3534
前言 目前出现了一个需求，需要父页面打开新的子页面，子页面提交表单之后，关闭子页面，然后把数据返回给父页面。 本来考虑使用sharedWorker，但是由于兼容性太差了，就弃用了。看到网上的介绍可以使用localStorage来实现，我就尝试了下。下面是一些具体的细节。 开始 整体流程如图所示： 需求分析 子页面需要知道自己的父页面对应的是谁，所以父页面打开子页面的时候需要传输一个父页面的KEY值 由于表单是使用dialog来显示，需要注意避免出现事件重复注册的，及时销毁事件，保留监听事件的唯一。 由于
前端开发面试题——HTML篇（你想要的，都在这里）
weixin_34356310的博客
10-22 89
HTML DOCTYPE作用？标准模式与兼容模式各有什么区别？ 1 告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。2 标准模式中，排版和JS运作模式都是以该浏览器支持的最高标准运行；　兼容模式中，页面以宽松的向后兼容的方式呈现，模拟老式浏览器的行为以防止站点无法工作。 HTML5为...
localStorage
lzy2213811239的博客
05-16 1397
localStorage（本地储存） HTML API ​ localstorage 在浏览器的 API 有两个：localStorage 和sessionStorage，存在于 window 对象中：localStorage 对应 window.localStorage，sessionStorage 对应 window.sessionStorage。 localStorage 和 sessionStorage 的区别主要是在于其生存期。 localStorage只要在相同的协议、相同的主机名、相同的端口
html读取localstorage,HTML Window localStorage用法及代码示例
weixin_31052141的博客
06-17 1014
HTML DOM窗口的localStorage属性允许您使用对象在Web浏览器中存储值对。这是一个只读属性。即使关闭浏览器，该对象也不会过期。因此，数据永远不会丢失。用法:window.localStorage使用以下命令将数据保存到localStorage：localStorage.setItem("key", "value");使用以下命令从localStorage读取数据：var name ...
html5本地存储li标签,HTML5本地存储：localStorage即时贴例子（存放读取）
weixin_42500866的博客
06-15 336
window.onload = init//页面加载时我们将调用init函数function init() {//它会从localstorage读取所有的即时贴，并通过DOM把他们增加到ul中var button = document.getElementByIdx_x_x_x("add_button");button.onclick = createSticky; //按钮事件var stick...
使用LocalStorage跨页面通信
zhouhao620的博客
04-11 2915
LocalStorage是常用的前端本地存储方式，它有一个相关的事件StorageEvent。 当LocalStorage变化时，会触发storage事件。利用这个特性，可以通过把消息写入LocalStorage，然后通过在各个页面内监听storage事件的方式来实现跨页面通信。 window.addEventListener("storage", (e) => { if (e.ke...
利用localStorage 来做页面之间的通信
huanlesyaya的博客
12-20 762
上周做了一个h5的互动小游戏（升官发财阉割版），是用ifrrame结合postMessage来做通信，其中发现了iframe不少的兼容问题，在移动端就更加不友好，所以这次开发(升官发财完整版)决定换个通信方式，用localStorage来做通信。localStorage可以在多个标签页做通信。 localStorage做通信需要满足两个以下几个条件 1.同一浏览器打开了两个同源的页面，这里分别给他...
网页多标签页之间的通讯方式详解
SharedWorker可以实现多个页面之间的通讯，例如，在多标签页之间通讯时，使用SharedWorker可以实现数据同步。 SharedWorker可以实现JS计算，并通过postMessage和onmessage与网页通讯。 在实际开发中，需要根据项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值