使用localStorage进行跨标签页通讯

最新推荐文章于 2025-11-01 10:21:43 发布
原创 最新推荐文章于 2025-11-01 10:21:43 发布 · 2.8k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#localStorage #跨标签页通信

本文介绍了如何使用localStorage进行跨标签页通讯。讲解了localStorage与sessionStorage的区别，重点阐述了通过监听storage事件来实现在同源页面间的通信，并探讨了localStorage的局限性——仅限于同源策略。通过一个具体的情景描述——用户登录状态在多个标签页间的同步，以及配套的A.html和B.html页面的demo展示，详细解释了该技术的应用。

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 lang="en">
<
最低0.47元/天 解锁文章
VUE中使用localStorage实现跨标签页面的通信
gdutRex的博客
10-22 3817
前言 目前出现了一个需求，需要父页面打开新的子页面，子页面提交表单之后，关闭子页面，然后把数据返回给父页面。 本来考虑使用sharedWorker，但是由于兼容性太差了，就弃用了。看到网上的介绍可以使用localStorage来实现，我就尝试了下。下面是一些具体的细节。 开始 整体流程如图所示： 需求分析 子页面需要知道自己的父页面对应的是谁，所以父页面打开子页面的时候需要传输一个父页面的KEY值 由于表单是使用dialog来显示，需要注意避免出现事件重复注册的，及时销毁事件，保留监听事件的唯一。 由于
前端跨标签页通信常见方案
weixin_48363291的博客
04-23 1481
跨标签页通信常见方案
使用LocalStorage跨页面通信
zhouhao620的博客
04-11 3140
LocalStorage是常用的前端本地存储方式，它有一个相关的事件StorageEvent。 当LocalStorage变化时，会触发storage事件。利用这个特性，可以通过把消息写入LocalStorage，然后通过在各个页面内监听storage事件的方式来实现跨页面通信。 window.addEventListener("storage", (e) => { if (e.ke...
一对一直播源码，使用 localStorage 实现多页面通信
最新发布
云豹网络科技
11-01 59
一对一直播源码，使用 localStorage 实现多页面通信。
java按钮触发另一个页面_前端跨页面通信，你知道哪些方法？
weixin_39948309的博客
11-24 1052
戳蓝字「前端技术优选」关注我们哦！引言在浏览器中，我们可以同时打开多个Tab页，每个Tab页可以粗略理解为一个“独立”的运行环境，即使是全局对象也不会在多个Tab间共享。然而有些时候，我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。正如下面这个例子：我在列表页点击“收藏”后，对应的详情页按钮会自动更新为“已收藏”状态；类似的，在详情页点击“收藏”后，列表页中按钮也会...
跨页面通信-localStorage
FanTesi的博客
11-22 226
适用于跨页面通信
利用HTML5 LocalStorage实现跨页面通信channel
weixin_30348519的博客
04-22 200
参考文档 转载于:https://www.cnblogs.com/suncj/p/4446851.html
vue跨标签页通信（或跨窗口）详细教程
bollat的博客
10-12 2377
跨标签页（或跨窗口）的通信通常涉及到两个或多个浏览器标签页之间的信息共享。由于每个标签页或窗口都是独立的 JavaScript 执行环境，它们不能直接通过 Vue 或其他 JavaScript 库来直接相互通信。
【前端实战】使用 BroadcastChannel API 实现跨标签页通信
qq_41590018的博客
04-14 1313
是 HTML5 新增的一个 API，用于在同源的不同浏览器窗口、标签页、iframe等之间进行实时通信。更高效：不依赖storage事件，性能更好。无大小限制：没有的 5MB 大小限制。支持复杂数据类型：可以传输复杂的数据结构，如对象、数组等。原生支持跨标签页通信：使用简单，易于实现。通过，我们可以轻松实现跨标签页的实时通信，避免了传统方法的诸多限制。在实际开发中，如果你需要在同源的不同标签页之间进行数据交互，不妨考虑使用。同时，要注意浏览器的兼容性问题，确保你的目标用户使用的浏览器支持该 API。
localstorage 和 storage 事件 用于跨页面通信
qq_44917015的博客
04-19 361
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
使用localStorage实现页面之间通信，一个页面发生变化，另一个页面也同时发生变化
Coder-文小白的博客
10-24 6254
不知道大家在平时开发过程中有没有遇到这种需求，浏览器打开两个窗口，一个发生变化，另一个也要同时发生变化。这种需求怎么实现呢，可以参考使用localStorage实现。 简单介绍一下localStorage：在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。 loca
一个基于LocalStorage的跨页面JS队列
BuquTianya的专栏
08-14 2531
借助localStorage做存储介质的栈存储器，用于在大页面中包含很多返回/完成时向上一个页面回返，但浏览器的返回又不能包含所有情况的场景。 *使用时，在用户登录页面可以调用clear方法，清空之前的数据， *如果不清空历史数据的话，一般情况也不会有问题，因为后续进栈的数据一般来说第一个页面是没有返回按钮的。 *实例化时可以指定maxSize，如果指定那么栈中将仅存储指定数量的item，如果
基于localStorage实现客户端跨页面数据同步
躁动de气球
12-20 1080
浏览器跨页面数据/状态同步方案
local storage在不同标签页，不同浏览器之间通用吗，可以跨域吗
weixin_43801836的博客
10-20 3827
local storage不可以跨域，但是可以使用iframe+postmessage可以实现。localStorage相比而言可以在多个标签页中共享数据，sessionStorage只适用于同一个标签页，：同源页面，也就是协议，端口，域名相同的页面。当然不能跨浏览器啦，都不是一个存储系统。
同一个网站，两个标签页使用localStorage进行实时通信
不会java的java程序员
12-20 658
同一个网站，不同标签页进行通信。常见场景就是数据列表和新增页面在不同标签页，新增完数据后又想要数据列表页面进行实时刷新。
利用localStorage 来做页面之间的通信
huanlesyaya的博客
12-20 858
上周做了一个h5的互动小游戏（升官发财阉割版），是用ifrrame结合postMessage来做通信，其中发现了iframe不少的兼容问题，在移动端就更加不友好，所以这次开发(升官发财完整版)决定换个通信方式，用localStorage来做通信。localStorage可以在多个标签页做通信。 localStorage做通信需要满足两个以下几个条件 1.同一浏览器打开了两个同源的页面，这里分别给他...
localStorage和sessionStorage在跨页面存储中的区别
九段刀客的博客
12-04 3261
我们知道localStorage和sessionStorage一个是长期缓存，一个是标签页关闭就会清除，但是他们还有一个区别我们平时可能会忽略，但是在同一个浏览器要实现登录多个用户是就会用到这一特性。 sessionStorage不会跨标签页存储，而localStorage会跨标签页存储。 如下，同一个浏览器A标签和B标签同时打开一个地址 写一段代码来测试区别 <input type=...
使用localstorage,cookie实现页面通信
wyhcyzai99的博客
08-16 198
调用localstorage 在一个标签页里面使用Locastorage.setItem(key,value)添加/修改/删除 内容； 在另一个标签页里面监听storage时间，即可得到localstorage存储的值，实现不同标签页之间的通讯。 在一个标签页调用 loacalStorage.setItem(name,val) 保存数据 **localStorage.removeItem(name)** 删除数据的时候会触发**‘storage**事件 在另外一个标签页监听document对象的storag
通过localStorage实现页面通信的方法
糖醋闷油瓶的博客
10-11 263
/** * @param {Object} s 页面之间通信的标识符，需要通信的页面之间该标识符必须一致 * @param {Object} f 触发执行的方法（本页面需要被触发的方法） * 该方法在需要通信的每个页面上都必须调用 */ function pagesCommunication(s, f) { //监听事件，内部调用传入的方法 var listenerFun = func...
跨标签页通信
03-13
### 浏览器跨标签页通信的方法和技术 在现代Web应用中，实现浏览器不同标签页间的高效通信至关重要。以下是几种常见的方法及其技术细节： #### 1. 使用LocalStorage事件监听机制 当在一个窗口或标签页中修改 `localStorage` 数据时，其他同源的窗口会触发相应的存储事件。这使得开发者可以在多个标签页之间传递消息。 ```javascript // 发送端：设置 localStorage 来发送数据 window.localStorage.setItem('message', JSON.stringify({ type: 'greeting', content: 'Hello from Tab A' })); // 接收端：监听 storage 事件来接收数据 window.addEventListener('storage', function(event) { if (event.key === 'message') { console.log(JSON.parse(event.newValue)); } }); ``` 这种方法简单易用，但存在一定的延迟，并且每次更改都会刷新整个本地存储[^1]。 #### 2. 广播通道 API (Broadcast Channel API) 广播通道允许同一源下的所有上下文（如不同的标签页、iframe 或 service worker）通过命名频道相互通信。它提供了更高效的实时双向通讯方式。 ```javascript const bc = new BroadcastChannel('example_channel'); bc.postMessage({ action: 'ping', data: 'some info' }); bc.onmessage = ({data}) => { console.log(`Received message ${JSON.stringify(data)}`); }; ``` 此接口具有更好的性能表现和更低的消息传输延迟，适合频繁的数据交换场景[^2]。 #### 3. Shared Worker 共享工作线程可以被同一个域内的多个脚本文件共同访问并执行异步任务。利用 shared workers 可以创建一个中间层来进行多标签页间的信息同步。 ```javascript if (!navigator.serviceWorker.controller && window.Worker) { const mySharedWorker = new SharedWorker('/path/to/shared-worker.js'); mySharedWorker.port.start(); } ``` 这种方式适用于需要长时间运行后台进程的应用程序，不过需要注意的是并非所有的浏览器都支持该特性[^3]。 #### 4. Cookies 和 SessionStorage 结合轮询 虽然这不是最理想的解决方案，但在某些情况下也可以考虑使用 cookies 加上定时查询 sessionStorage 的变化情况来间接达到目的。然而由于其效率低下以及可能带来的安全风险，在实际项目中应谨慎采用这种做法。 综上所述，对于大多数应用场景而言，推荐优先选用 **Broadcast Channel API** 进行跨标签页通信；而对于一些特殊需求，则可以根据具体情况评估是否适用 LocalStorage 或者 Shared Workers 方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值