同一个浏览器中打开了两个 tab 页签(即同一个应用的两个不同实例)的交互

因为每个 tab 都是独立的浏览上下文(除非使用特定技术),它们之间不能直接共享 JavaScript 对象或服务实例。不过,可以通过以下几种方式实现 tab 页签之间的交互:

通过 localStorage 或 sessionStorage + 事件监听

localStoragesessionStorage 是浏览器提供的 Web 存储机制,不同的 tab 可以访问同一个 localStoragesessionStorage,并且可以通过监听 storage 事件来实现跨 tab 页签的数据同步。

示例:
页面 1:更新 localStorage 中的数据。
页面 2:通过监听 storage 事件获取数据变化。
页面 1:

// 更新 localStorage 数据
localStorage.setItem('sharedData', JSON.stringify({ key: 'value' }));

页面 2:

// 监听 localStorage 数据变化
window.addEventListener('storage', function(event) {if (event.key === 'sharedData') {const data = JSON.parse(event.newValue);console.log(data); // 输出:{ key: 'value' }}
});

在这个场景下,页面 1 更新 localStorage 后,页面 2 会接收到 storage 事件并可以获取最新的 sharedData。

通过 WebSocket

如果你的应用需要在多个 tab 页签之间进行实时通信,并且数据量较大或通信频繁,可以使用 WebSocket 进行通信。WebSocket 允许客户端与服务器之间建立长连接,并且服务器可以向所有连接的客户端广播消息。

示例:
页面 1(发送数据):

const socket = new WebSocket('ws://example.com/socket');// 发送消息
socket.send(JSON.stringify({ key: 'value' }));

页面 2(接收数据):

const socket = new WebSocket('ws://example.com/socket');// 接收消息
socket.addEventListener('message', function(event) {console.log(event.data); // 输出:{ key: 'value' }
});

WebSocket 是实时双向通信的工具,适用于需要跨 tab 页签和多个客户端之间的即时消息传递,通常用于聊天室、实时通知等场景。

通过 IndexedDB

IndexedDB 是一种在浏览器中存储较大数据的机制,支持异步读取和写入。不同的 tab 页签可以访问同一个 IndexedDB 数据库,适合在多个标签页之间共享大量数据或复杂结构的数据。

示例:
页面 1:写入数据到 IndexedDB

const request = indexedDB.open('myDatabase', 1);request.onsuccess = function(event) {const db = event.target.result;const transaction = db.transaction(['myStore'], 'readwrite');const store = transaction.objectStore('myStore');store.put({ key: 'value' }, 'sharedData');
};

页面 2:读取 IndexedDB 数据

const request = indexedDB.open('myDatabase', 1);request.onsuccess = function(event) {const db = event.target.result;const transaction = db.transaction(['myStore'], 'readonly');const store = transaction.objectStore('myStore');const dataRequest = store.get('sharedData');dataRequest.onsuccess = function() {console.log(dataRequest.result); // 输出:{ key: 'value' }};
};

IndexedDB 更适合存储复杂数据,适用于需要在多个标签页间共享更大、更复杂的数据集的场景。

总结

localStorage + storage 事件:适合简单的、基于本地存储的数据同步。
WebSocket:适用于实时数据通信,尤其是在多个客户端或 tab 之间需要频繁交互的场景。
IndexedDB:适用于跨多个 tab 页签共享较大或复杂的数据。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/8133.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

移植 AWTK 到 纯血鸿蒙 (HarmonyOS NEXT) 系统 (9) - 编译现有的AWTK应用程序

AWTK 应用程序开发完成后,在配置文件中添加 harmonyos 的选项,通过create_project.py脚本即可生成 DevEco Studio的工程。 安装开发环境 DevEco Studio HarmonyOS 的开发工具。 Python 运行环境。 git 源码管理工具。 下载 awtk 和 awtk-harmonyos…

【推荐】iptables学习宝典

链接: IPtables-朱双印博客 学习iptables的抗鼎之作,推荐。

python+pptx:(三)添加统计图、删除指定页

目录 统计图 删除PPT页 from pptx import Presentation from pptx.util import Cm, Inches, Mm, Pt from pptx.dml.color import RGBColor from pptx.chart.data import ChartData from pptx.enum.chart import XL_CHART_TYPE, XL_LABEL_POSITION, XL_DATA_LABEL_POSITIONfil…

react 修改默认样式

.but :global(.ant-btn ) {color:red !important;font-size: 30px !important;} //在外面套一层 <div className{styles[but]}><Button type"primary" >Primary Button</Button> </div> import styles from ./index.less;

【MM-Align】学习基于输运的最优对齐动力学,快速准确地推断缺失模态序列

代码地址 - > github传送 abstract 现有的多模态任务主要针对完整的输入模态设置&#xff0c;即每个模态在训练集和测试集中要么是完整的&#xff0c;要么是完全缺失的。然而&#xff0c;随机缺失的情况仍然没有得到充分的研究。在本文中&#xff0c;我们提出了一种新的方…

这才是跑马灯该有的样子,用vue3-marquee刷新你的认知

这才是跑马灯该有的样子&#xff01;用vue3-marquee刷新你的认知&#xff01; 如果你曾经想为你的 Vue 3 项目增加一点视觉动感&#xff0c;那么 vue3-marquee 可能就是你要找的宝藏。它是一个无依赖的跑马灯组件&#xff0c;轻巧好用&#xff0c;让动画效果看起来比喝完咖啡后…

[每周一更]-(第122期):模拟面试|数据库面试思路解析

10|数据库索引:为什么 MySQL 用 B+ 树而不用 B 树? 为什么 MySQL 用 B+ 树而不用 B 树? 什么是覆盖索引? 什么是聚簇索引/非聚簇索引? 什么是哈希索引?MySQL InnoDB 引擎怎么创建一个哈希索引? 什么回表?如何避免回表? 树的高度和查询性能是什么关系? 什么是索引最左…

数据结构之二叉树的收尾(性质)

1&#xff09;对任何⼀棵二叉树, 如果度为 0 其叶结点个数为 n0 , 度为 2 的分支结点个数为 n2 , 则有n0n2 1 1. 某二叉树共有 399 个结点&#xff0c;其中有 199 个度为 2 的结点&#xff0c;则该二叉树中的叶子结点数为&#xff08; &#xff09; 解&#xff1a;n0n2 1 n01…

MyBatis-Plus条件构造器:构建安全、高效的数据库查询

一、关于条件构造器(Wrapper) 1.1 简介 MyBatis-Plus 提供了一套强大的条件构造器&#xff08;Wrapper&#xff09;&#xff0c;用于构建复杂的数据库查询条件。Wrapper 类允许开发者以链式调用的方式构造查询条件&#xff0c;无需编写繁琐的 SQL 语句&#xff0c;从而提高开…

HT3286 免电感滤波2x30W D类立体声音频功放

1 特性 ● 输出功率(BTL模式) 2x20W(VDD14.5V,RL4Ω,THDN10%) 2x33W(VDD22V,RL8Ω,THDN10%) ● 输出功率(PBTL模式) 50W(VDD22V,RL4Ω,THDN1%) ● 单电源系统&#xff0c;4.5V-22V宽电压输入范围 ● 超过90%效率&#xff0c;无需散热器 ● 可选输出模式:BD和1SPW ● MUTE和关断…

安当ASP系统:适合中小企业的轻量级Radius认证服务器

安当ASP&#xff08;Authentication Service Platform&#xff09;身份认证系统是一款功能强大的身份认证服务平台&#xff0c;特别适用于中小企业。其中&#xff0c;简约型Radius认证服务器是安当ASP系统中的一个重要组成部分。以下是对该系统的详细介绍&#xff1a; 一、主要…

开源模型应用落地-glm模型小试-glm-4-9b-chat-批量推理(二)

一、前言 GLM-4是智谱AI团队于2024年1月16日发布的基座大模型&#xff0c;旨在自动理解和规划用户的复杂指令&#xff0c;并能调用网页浏览器。其功能包括数据分析、图表创建、PPT生成等&#xff0c;支持128K的上下文窗口&#xff0c;使其在长文本处理和精度召回方面表现优异&a…

第七部分:1. STM32之ADC实验--单通道实验(滑动变阻器调节电压)

主要利用一个模拟量的电位器来实时改变电压值&#xff0c;通过STM32自带的ADC通道来采集这个数据&#xff0c;并打印出来&#xff01;本实验是单通道实验 一句话&#xff0c;学完STM32&#xff0c;我就往南走&#xff0c;我的工资只有5000.~~~~Whappy 实验代码&#xff1a; A…

50岁+人群月活超1亿,短剧迎来新对手,小程序游戏“收割”中老年

抢夺中老年流量&#xff1a;微短剧向左&#xff0c;小游戏向右 作者&#xff5c;AgeClub 干货抢先看 1.《黑神话&#xff1a;悟空》走红&#xff0c;吸引大量玩家入坑单机市场。与硬核单机游戏不同&#xff0c;在渗透率更高的小游戏领域&#xff0c;聚集了更多“网瘾”中老年…

MySQL OnlineDDL添加字段

alter 添加字段 5.7 默认是algorithminplace以及locknone来进行DDL操作&#xff0c;但是添加列整个执行过程中也会部分涉及到Copy Table。 如果有碎片比较大&#xff0c;因为会copy表会碎片整理&#xff0c; 添加字段成功后有可能磁盘使用空间降低&#xff0c;添加过程中磁盘…

WPF中如何简单的使用MvvmLight创建一个项目并进行 增删改查

目录 第一步&#xff1a;创建项目后下载如下两个NuGet程序包&#xff0c;然后删除删掉using Microsoft.Practices.ServiceLocation; 并且引入using CommonServiceLocator; 第二步&#xff1a;删除原来的XAML文件并创建如下的包结构然后创建一个在View文件夹中创建一个Main窗体 …

ssm校园媒体信息发布系统—计算机毕业设计源码42272

目 录 摘要 1 绪论 1.1研究背景与意义 1.2国内外研究现状 1.3研究内容 1.4 ssm框架介绍 1.5论文结构与章节安排 2 校园媒体信息发布系统系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1数据增加流程 2.2.2数据修改流程 2.2.3数据删除流程 2.3 系统功能分析 2.3…

【北京迅为】《STM32MP157开发板嵌入式开发指南》-第七十一章 制作Ubuntu文件系统

iTOP-STM32MP157开发板采用ST推出的双核cortex-A7单核cortex-M4异构处理器&#xff0c;既可用Linux、又可以用于STM32单片机开发。开发板采用核心板底板结构&#xff0c;主频650M、1G内存、8G存储&#xff0c;核心板采用工业级板对板连接器&#xff0c;高可靠&#xff0c;牢固耐…

【数据结构】线性表——链表

写在前面 本篇笔记记录线性表——链表的主要形式&#xff0c;虽然链表有8种形式&#xff0c;但是只要精通笔记中编写的两种&#xff0c;即可触类旁通。 文章目录 写在前面一、链表的概念及结构二、链表的分类三、无头单向非循环链表3.1、链表的实现3.1.1、链表的结构体定义3.1…

Java:168 springboot小区团购管理

作者主页&#xff1a;舒克日记 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 ​ 系统有管理员&#xff0c;用户两个角色。 主要的功能有用户信息管理、商品信息管理、商品类型管理、商品订单管理、公告信息管理、公告类型管理 …