前端跨页面通信的几种方式---同源

参考链接

1、LocalStorage:当 LocalStorage 变化时,会触发storage事件。利用这个特性,我们可以在发送消息时,把消息写入到某个 LocalStorage 中;然后在各个页面内,通过监听storage事件即可收到通知。

2、BroadCast Channel: BroadCast Channel 可以帮我们创建一个用于广播的通信频道。当所有页面都监听同一频道的消息时,其中某一个页面通过它发送的消息就会被其他所有页面收到。它的API和用法都非常简单。

在这里插入图片描述

3、Service Worker 是一个可以长期运行在后台的 Worker,能够实现与页面的双向通信。多页面共享间的 Service Worker 可以共享,将 Service Worker 作为消息的处理中心(中央站)即可实现广播效果。

4、Shared Worker:Shared Worker 是 Worker 家族的另一个成员。普通的 Worker 之间是独立运行、数据互不相通;而多个 Tab 注册的 Shared Worker 则可以实现数据共享。Shared Worker 在实现跨页面通信时的问题在于,它无法主动通知所有页面,因此,我们会使用轮询的方式,来拉取最新的数据。

5、IndexedDB:除了可以利用 Shared Worker 来共享存储数据,还可以使用其他一些“全局性”(支持跨页面)的存储方案。例如 IndexedDB 或 cookie。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java实现知乎热点小时榜爬虫

1.效果演示 1.1 热点问题列表 启动程序后&#xff0c;自动展示热点问题&#xff0c;并等待终端输入 1.2 根据序号选择想看的热点问题 输入问题序号&#xff0c;展示回答内容 1.3 退出 输入q即可退出程序 2.源码 2.1 pom.xml <?xml version"1.0" enco…

java数据结构与算法刷题-----LeetCode46. 全排列

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 1. 暴力回溯2. 分区法回溯 1. 暴力回溯 解题思路&#xff1a;时…

【软考高项】六、信息技术发展之计算机网络知识点

1、网络作用划分 个人局域网(PAN)、局域网(LAN)、城域网(MAN)、广域网(WAN)、公用网、专用网。 2、OSI七层 物理层、数据链路层、网络层、传输层、会话层、表示层、应用层 3、广域网协议类型 PPP点对点协议、ISDN综合业务数字网、xDSL(DSL数字用户线路的统称:HDSL.SDSL、M…

04- 基于SpringAMQP封装RabbitMQ,消息队列的Work模型和发布订阅模型

SpringAMQP 概述 使用RabbitMQ原生API在代码中设置连接MQ的参数比较繁琐,我们更希望把连接参数写在yml文件中来简化开发 SpringAMQP是基于AMQP协议定义的一套API规范,将RabbitMQ封装成一套模板用来发送和接收消息 AMQP(Advanced Message Queuing Portocol)是用于在应用程序…

[CISCN2019 华东南赛区]Web11

模块注入题&#xff0c;这类题一般拥有固定的payload。 界面大概就是这么个样子 返回了IP地址&#xff0c;提示getip&#xff0c;xff等。 这是smarty模板。很明显了&#xff0c;这个模板存在xff处的命令执行。抓取数据包并添加字段 X-Forwarded-For:{{system(ls)}} cat /fla…

密码学——MAC

消息认证码 在信息发送和接收过程中,若攻击者能够得到信息,进行篡改,就能达到欺骗,诈骗,冒名顶替的作用。为了防止冒名诈骗,一个对策就是使用消息认证码——MAC: Message Authentication Code。 消息认证码,即确定消息真实性的认证程序。发件人将想要发送的信息和从哪个…

【视觉三维重建】【论文笔记】Deblurring 3D Gaussian Splatting

去模糊的3D高斯泼溅&#xff0c;看Demo比3D高斯更加精细&#xff0c;对场景物体细节的还原度更高&#xff0c;[官网]&#xff08;https://benhenryl.github.io/Deblurring-3D-Gaussian-Splatting/&#xff09; 背景技术 Volumetric rendering-based nerual fields&#xff1a…

linux sshd_config配置说明

[root01 ssh]# cat sshd_config #######################SSH Base Config################## #######通过OpenSSH工具入xshell连接默认端口 可以改成其他默认是22 PAM 认证过程 1&#xff09;使用者执行/usr/bin/passwd程序&#xff0c;并输入密码。 2&#xff09;passwd开…

【开源-土拨鼠充电系统】鸿蒙 HarmonyOS 4.0+微信小程序+云平台

本人自己开发的开源项目&#xff1a;土拨鼠充电系统 ✍GitHub开源项目地址&#x1f449;&#xff1a;https://github.com/cheinlu/groundhog-charging-system ✍Gitee开源项目地址&#x1f449;&#xff1a;https://gitee.com/cheinlu/groundhog-charging-system ✨踩坑不易&am…

192基于matlab的雷达信号进行RD图的仿真

基于matlab的雷达信号进行RD图的仿真&#xff0c;在距离进行匹配滤波&#xff0c;具体方法是与回波信号的FFT与参考信号对称共轭的FFT相乘&#xff0c;再IFFT。在多普勒维通过多普勒滤波器组进行滤波&#xff0c;相当于进行FFT。程序已调通&#xff0c;可直接运行。 192 matlab…

Elasticsearch:使用标记修剪提高文本扩展性能

作者&#xff1a;来自 Elastic Kathleen DeRusso 本博客讨论了 ELSER 性能的令人兴奋的新增强功能&#xff0c;该增强功能即将在 Elasticsearch 的下一版本中推出&#xff01; 标记&#xff08;token&#xff09;修剪背后的策略 我们已经详细讨论了 Elasticsearch 中的词汇和…

Landsat、哨兵等免费数据下载地址汇总

我们科研和一些工程化应用中&#xff0c;经常会用到免费的Landsat、哨兵1/2/3等数据。下面介绍常用的下载网址&#xff1a; 1.哨兵系列数据 哨兵系列数据在https://scihub.copernicus.eu/dhus 上简单注册一个用户就可以下载&#xff0c;就是速度慢点&#xff0c;还限制一个用…

Linux第77步_处理Linux并发的相关函数

了解linux中的“原子整形数据”操作、“原子位数据”操作、自旋锁、读写锁、顺序锁、信号量和互斥体&#xff0c;以及相关函数。 并发就是多个“用户”同时访问同一个共享资源。如&#xff1a;多个线程同时要求读写同一个EEPROM芯片&#xff0c;这个EEPROM就是共享资源&#x…

【数学建模】线性规划

针对未来可能的数学建模比赛内容&#xff0c;我对学习的内容做了一些调整&#xff0c;所以先跳过灰色关联分析和模糊综合评价的代码&#xff0c;今天先来了解一下运筹规划类——线性规划模型。 背景&#xff1a; 某数学建模游戏有三种题型&#xff0c;分别是A&#xff0c;B&am…

远程办公、企业内网服务器的Code-Server上如何配置使用CodeGeeX插件

很多小伙伴都会在工作中使用code-server&#xff0c;比如说远程办公&#xff0c;当你需要在家访问你的工作环境&#xff0c;亦或者是你们公司的Docker是放入服务器中。code-server 无疑是最好的选择&#xff0c;它可以让你通过互联网安全地连接到远程服务器上的开发环境并且使用…

【保姆级】GPT的Oops问题快速解决方案

GPT的"Oops"问题通常指的是GPT在处理请求时突然遇到错误或无法提供预期输出的情况。要快速解决这个问题&#xff0c;可以尝试以下分步策略&#xff1a; 确认问题范围&#xff1a; 首先&#xff0c;确认问题是偶发的还是持续存在的。如果是偶发的&#xff0c;可能是临…

微博热搜榜单采集,微博热搜榜单爬虫,微博热搜榜单解析,完整代码(话题榜+热搜榜+文娱榜和要闻榜)

文章目录 代码1. 话题榜2. 热搜榜3. 文娱榜和要闻榜 过程1. 话题榜2. 热搜榜3. 文娱榜和要闻榜 代码 1. 话题榜 import requests import pandas as pd import urllib from urllib import parse headers { authority: weibo.com, accept: application/json, text/pl…

win10磁盘删除卷里面数据怎么恢复 win10磁盘删除卷怎么恢复

大家好&#xff0c;我是你们的小助手&#xff0c;今天我们来聊一下一个非常重要的话题——win10磁盘删除卷里面数据怎么恢复&#xff1f;相信很多小伙伴都曾经遇到过这种情况&#xff0c;不小心把重要的文件删掉了&#xff0c;或者格式化了整个磁盘&#xff0c;导致数据丢失。那…

Halcon中的交集、补集、全选和反选等操作

1、交集&#xff1a;两个ROI相交的部分 dev_open_window (0, 0, 512, 512, black, WindowHandle) gen_circle (ROI_0, 65, 150, 43) gen_circle (ROI_1, 155, 180, 63) * 交集&#xff1a;两个ROI相交的部分 intersection (ROI_0, ROI_1, RegionIntersection) dev_set_color (…

ResNet学习笔记

一、residual结构 优点&#xff1a; &#xff08;1&#xff09;超深的网络结构(突破1000层) &#xff08;2&#xff09;提出residual模块 &#xff08;3&#xff09;使用Batch Normalization加速训练(丢弃dropout) 解决问题&#xff1a; &#xff08;1&#xff09; 梯度消失和…