使用storage事件实现跨窗口通讯

最新推荐文章于 2024-08-30 18:40:43 发布

阿豪boy

最新推荐文章于 2024-08-30 18:40:43 发布

阅读量140

点赞数

文章标签： window web java vue gwt

本文链接：https://blog.csdn.net/qq_35516360/article/details/122064623

版权

本文介绍了如何使用Web API的storage事件来实现在不同窗口之间的通讯。通过监听storage事件，当在一个窗口中修改数据时，其他窗口可以接收到通知并读取更新，从而达到通讯的目的。虽然未测试在高频率读写场景下的性能，但预计对于100毫秒级的操作已足够使用。

摘要由CSDN通过智能技术生成

原文链接: 使用storage事件实现跨窗口通讯

上一篇: regl fbo 生命游戏

下一篇: webgl 测试线性插值

https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event

使用storage事件实现跨窗口通讯, 每次修改的时候都可以在其他窗口收到消息, 然后再去读这个消息就能实现通讯了, 但是没测试大量读写的情况, 不过100ms级应该也是够用了

<template>
  <div>
    <div>storage</div>
    <!--   https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event -->
    <el-button @click="save">save</el-button>
    count:{
   { state.count }}
  </d

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

阿豪boy

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用storage事件实现跨窗口通讯

原文链接: 使用storage事件实现跨窗口通讯上...
复制链接

扫一扫

浏览器缓存

Luckyzhoufangbing的博客

09-13

2336

1. 监听 storage 变动（跨页签通信） window.addEventListener('storage', (event) => { console.log(event.newValue) }) 必须是同源的两个页面，拿vue脚手架为例 index.vue: <template> <div class="hello"> <input type="text" v-model="name"> <but

跨页面通信、如何监听 LocalStorage 的变化【storage 事件】

Xpy 的博客

04-02

4208

场景：当涉及到同时打开多个tab页，操作一个tab，希望其他的tab也会同时进行更新状态。原理就是前度的跨页面通信一、当 LocalStorage 变化时，会触发storage事件。在需要改变的页面增加时间监听： window.addEventListener('storage', function (e) { if (e.key === 'ctc-msg') { const data = JSON.parse(e.newValue); const text =

参与评论您还未登录，请先登录后发表或查看评论

创建一个storageevent事件_谈谈StorageEvent

weixin_39901404的博客

11-19

956

编者按：本文作者刘观宇，360 奇舞团高级前端工程师、技术经理，W3C CSS 工作组成员。纷纷红紫已成尘，布谷声中夏令新。夹路桑麻行不尽，始知身是太平人。 ——宋.陆游《初夏绝句》我们在开发多Tab应用时候，常常会遇到多个Tab状态同步的问题。想象如下场景：用户主界面，显示用户购物车内待结算的商品总数。此时，用户可能打开多个Tab。当用户添加新商品到购物车的时候，需要更新购物车的数...

禁止修改localStorage值禁止写入localStorage值

fred8的博客

08-02

1028

禁止修改localStorage值 window添加监听事件（监听storage变化） window.addEventListener(‘storage’, (e) => { localStorage.setItem(e.key, e.oldValue) }) 禁止写入localStorage值本质是禁止比人写入localStorage值 window添加监听事件（监听storage变化） // 设置自己的识别符，如（Tzpt） window.localStorage.setItem("Tzptsz

监听storage数据变化

TKG09的博客

11-21

835

window.addEventListener('storage',function (e){ if(e.key == 'selectInfo'){ var selectInfoObj = JSON.parse(e.newValue) that.reseverBtnText = '（ '+selectInfoObj.seatName+' 低消'+selec...

两个html页面之间通讯,面试官：前端跨页面通信，你知道哪些方法？

weixin_36278346的博客

06-07

2742

引言在浏览器中，我们可以同时打开多个Tab页，每个Tab页可以粗略理解为一个“独立”的运行环境，即使是全局对象也不会在多个Tab间共享。然而有些时候，我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。正如下面这个例子：我在列表页点击“收藏”后，对应的详情页按钮会自动更新为“已收藏”状态；类似的，在详情页点击“收藏”后，列表页中按钮也会更新。跨页面通信实例这就是我们所说的前端跨页面...

前端窗口插件

04-15

4. 浏览器API，如Window.postMessage，用于跨窗口通信，实现不同页面间的交互。在实际应用中，前端窗口插件广泛应用于各种工作场景，如： 1. 开发环境：开发者使用集成开发环境（IDE）的插件，如VS Code的多窗口...

两个窗口之间的通信

chenzihong123的博客

01-02

2349

两个窗口之间的通信 1.localstorage 一个窗口更新localStorage，另一个窗口监听window对象的”storage”事件，来实现通信。(localStorage需要同源窗口才能共享，即协议，域名，端口一致) // 本窗口的设值代码 localStorage.setItem('aaa', (Math.random()*10).toString()) // 其他窗口监听stor...

SpringBoot使用WebSocket实现多屏联动（方案+实现）

qq_42133100的博客

10-23

2630

WebSocket简述 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。在 WebSocket API 中，浏览器和服务器...

HTML5本地储存--利用storage事件实时监听Web Storage

删库跑路

06-16

1万+

在事件处理函数中，触发事件的事件对象（event参数值）具有如下几个属性 event.key 属性：属性值为在 session 或 localStorage 中被修改的数据键值。 event.oldValue 属性：属性值为在 sessionStorage 或 localStorage 中被修改的值。 event.newValue 属性：属性值为在 sessionStorage 或

前端跨页面通信

大灰狼的小绵羊哥哥的博客

04-15

1676

背景用户在实际的操作场景中会打开多个 Tab 页面A、B、C、D、E...。当用户在 E Tab 页退出登录，并且登录到新的账号，然后用户切换到非 E 的 Tab 时，发现登录信息没有刷新，并且由于登录信息没有刷新，会出现操作异常。这个问题简单来说就是多个 Tab 信息没有同步。问题的关键在于一个 Tab 退出重新登录，需要通知到其他的 Tab 刷新到最新的信息。本质问题就是解决前端跨页面通信。本篇文章就是对前端跨页面通信的解决方案做了一个了解。 onstorage WindowEventHa

【js】window.addEventListener介绍说明

热门推荐

Q仔的博客

06-29

6万+

原型 public override function addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void 作用　　侦听事件并处理相应的函数。[1] 参数

多页面通信之监听storage

qq_39658827的博客

12-03

819

多个页面通信有很多方法，其中之一便是使用storage。 storage只能够监听同源非同一页面中的storage变化，如果想监听同一个页面的storage变化，我们需要改写原生方法（应用了装饰者模式），抛出自定义事件来监听storage的变化。 1.监听同源页面storage变化： ps:如何产生同源页面，可以在一个文件夹下定义两个html，由一个html...

使用window中storage如何实现两个页面简单交互

超cccccccc的博客

08-16

662

两个页面必须处于同源页面；每个页面的URL由协议、域名、端口和路径组成，如果他们的协议、域名、端口都相同时就属于同源。第一个页面中写了三个不同按钮，分别注册事件当点击时给当前localStorage添加数据。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i

sessionStorage跨页面通信

Little_fairy_lzx的博客

03-09

2671

sessionStorage在同一个页面中存储和取值是没有问题的,（这里的页面是同一个html文件）跨页面的话就会有问题比如浏览器导航栏的tab。例如：页面a.html和页面b.html同时打开，这时在a.html中存储token，在页面b.html中是取不到的。解决办法：在页面a中打开页面b，并创建一个storage事件对象将a中要存储的值在b中存储。 function openWindow() { let newWindow = window.open('child.html','new

多页面共用sessionStorage的实现

weixin_33716154的博客

07-01

6234

sessionStorage的局限: sessionStorage是页面级别的，仅在一个标签页生效，如果同一个浏览器同时打开多个标签页，且都访问同一个域名，sessionStorage是不会在这多个标签页共用的，即每个标签页都有自己的sessionStorage。如果想突破这种局限，实现多tab页共享存取数据同时又有sess...

浏览器—Storage 接口

W Y L

03-30

798

1、概述 Storage 接口用于脚本在浏览器保存数据。两个对象部署了这个接口：window.sessionStorage和window.localStorage。 sessionStorage保存的数据用于浏览器的一次会话（session），当会话结束（通常是窗口关闭），数据被清空；localStorage保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。除了保存期限的...

Java基础（6）- Java代码笔记3