跨标签页通信的8种方式（下）

跨标签页通信是指在浏览器中的不同标签页之间进行数据传递和通信的过程。在传统的Web开发中，每个标签页都是相互独立的，无法直接共享数据。然而，有时候我们需要在不同的标签页之间进行数据共享或者实现一些协同操作，这就需要使用跨标签页通信来实现。

常见的跨标签页方案如下：

  • BroadCast Channel

  • Service Worker

  • LocalStorage window.onstorage 监听

  • window.open、window.postMessage

  • Shared Worker 定时器轮询（ setInterval ）

  • IndexedDB 定时器轮询（ setInterval ）

  • cookie 定时器轮询（ setInterval ）

  • Websocket

前面4种方式可见: 跨标签页通信的8种方式（上）

本文介绍后面4种

Shared Worker

Shared Worker 是一种在多个浏览器标签页之间共享的 JavaScript 线程。它可以用于实现跨标签页的通信。

SharedWorker 接口代表一种特定类型的 worker，可以从几个浏览上下文中访问，例如几个窗口、iframe 或其他 worker。它们实现一个不同于普通 worker 的接口，具有不同的全局作用域，

备注：  如果要使 SharedWorker 连接到多个不同的页面，这些页面必须是同源的（相同的协议、host 以及端口）。

兼容性

  1. 下面是一个使用 Shared Worker 进行通信的示例：

在主页面中：

// 创建一个 Shared Worker
const worker = new SharedWorker('worker.js');

// 监听来自 Shared Worker 的消息
worker.port.onmessage = function(event) {
  console.log('Received message from worker:', event.data);
};

// 向 Shared Worker 发送消息
worker.port.postMessage('Hello from main page!');

在 worker.js 文件中：

// 监听来自主页面的消息
self.onconnect = function(event) {
  const port = event.ports[0];
  
  // 监听来自主页面的消息
  port.onmessage = function(event) {
    console.log('Received message from main page:', event.data);
    
    // 向主页面发送消息
    port.postMessage('Hello from shared worker!');
  };
};

IndexedDB

IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。

IndexedDB 是一个事务型数据库系统，类似于基于 SQL 的 RDBMS。然而，不像 RDBMS 使用固定列表，IndexedDB 是一个基于 JavaScript 的面向对象数据库。IndexedDB 允许你存储和检索用键索引的对象；可以存储结构化克隆算法支持的任何对象。你只需要指定数据库模式，打开与数据库的连接，然后检索和更新一系列事务。

使用 IndexedDB 执行的操作是异步执行的，以免阻塞应用程序。

IndexedDB 是浏览器提供的一种本地数据库，可以用于在多个标签页之间共享数据。可以使用 setInterval 定时轮询 IndexedDB 来实现跨标签页通信。下面是一个示例：

在发送消息的标签页中：

// 打开或创建 IndexedDB 数据库
const request = indexedDB.open('messageDatabase', 1);

request.onupgradeneeded = function(event) {
  const db = event.target.result;
  
  // 创建一个对象存储空间用于存储消息
  db.createObjectStore('messages', { keyPath: 'id', autoIncrement: true });
};

request.onsuccess = function(event) {
  const db = event.target.result;
  
  // 向数据库中添加一条新消息
  const transaction = db.transaction(['messages'], 'readwrite');
  const objectStore = transaction.objectStore('messages');
  
  const message = { content: 'Hello from sender!' };
  
  objectStore.add(message);
  
  transaction.oncomplete = function() {
    console.log('Message sent successfully!');
    
    // 关闭数据库连接
    db.close();
  };
};

request.onerror = function(event) {
  console.error('Error opening database:', event.target.error);
};

在接收消息的标签页中：

// 打开或创建 IndexedDB 数据库
const request = indexedDB.open('messageDatabase', 1);

request.onsuccess = function(event) {
  const db = event.target.result;
  
  // 创建一个定时器，每隔一段时间轮询数据库中的消息
  setInterval(function() {
    // 创建一个事务
    const transaction = db.transaction(['messages'], 'readwrite');
    const objectStore = transaction.objectStore('messages');
    
    // 获取存储在对象存储中的所有消息
    const request = objectStore.getAll();
    
    request.onsuccess = function(event) {
      const messages = event.target.result;
      
      // 处理消息
      messages.forEach(function(message) {
        console.log('Received message:', message.content);
        
        // 在处理完消息后，删除该消息
        objectStore.delete(message.id);
      });
      
      // 关闭事务
      transaction.oncomplete = function() {
        console.log('Messages processed successfully!');
      };
    };
    
    request.onerror = function(event) {
      console.error('Error retrieving messages:', event.target.error);
      
      // 关闭事务
      transaction.abort();
    };
  }, 1000);
};

request.onerror = function(event) {
  console.error('Error opening database:', event.target.error);
};

在上述示例中，我们创建了一个名为 "messageDatabase" 的 IndexedDB 数据库，并在其中创建了一个名为 "messages" 的对象存储空间用于存储消息。在发送消息的标签页中，我们向数据库中添加一条新消息。而在接收消息的标签页中，我们创建了一个定时器，每隔一段时间轮询数据库中的消息，并处理这些消息。处理完消息后，我们将其从数据库中删除。

请注意，在实际应用中，您可能需要更复杂的逻辑来处理跨标签页通信，并确保数据同步和一致性。此示例仅提供了一个基本的框架来演示如何使用 IndexedDB 实现跨标签页通信。

cookie

Cookie 是一种在浏览器和服务器之间传递的小型文本文件，可以用于在多个标签页之间共享数据。可以使用 setInterval 定时轮询 Cookie 来实现跨标签页通信。下面是一个示例：

在发送消息的标签页中：

// 设置一个 Cookie，将消息存储在 Cookie 中
document.cookie = 'message=Hello from sender!';

在接收消息的标签页中：

// 创建一个定时器，每隔一段时间轮询 Cookie 中的数据
setInterval(function () {
  // 获取存储在 Cookie 中的消息
  const cookies = document.cookie.split(';')
  let message = ''

  for (let i = 0; i < cookies.length; i++) {
    const cookie = cookies[i].trim()

    if (cookie.startsWith('message=')) {
      message = cookie.substring('message='.length)
      break
    }
  }

  // 处理消息
  if (message) {
    console.log('Received message:', decodeURIComponent(message))

    // 清除 Cookie
    document.cookie = 'message=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'
  }
}, 1000)

在上述示例中，我们在发送消息的标签页中设置了一个名为 "message" 的 Cookie，并将消息存储在其中。而在接收消息的标签页中，我们创建了一个定时器，每隔一段时间轮询 Cookie 中的数据。通过解析和处理 Cookie，我们可以获取到存储的消息，并进行相应的处理。处理完消息后，我们清除了该 Cookie。 请注意，在使用 Cookie 进行跨标签页通信时，需要注意以下几点：

  • 跨域名通信：Cookie 默认只能在同一域名下共享。如果需要在不同域名下进行跨标签页通信，需要设置合适的域名和路径。
  • Cookie 大小限制：Cookie 的大小有限制，通常为几 KB。如果消息较大，可能需要拆分成多个 Cookie 进行存储。
  • 安全性考虑：Cookie 中的数据可以被用户和其他脚本访问和修改。因此，不适合存储敏感信息。 以上示例提供了一个基本的框架来演示如何使用 Cookie 实现跨标签页通信。在实际应用中，您可能需要更复杂的逻辑来处理跨标签页通信，并确保数据同步和一致性。

websocket

Websocket 是一种在浏览器和服务器之间进行全双工通信的协议，可以用于实现实时的跨标签页通信。下面是一个使用 Websocket 进行通信的示例：

在发送消息的标签页中：

// 创建一个 WebSocket 连接
const socket = new WebSocket('ws://example.com');
// 监听连接成功的事件
socket.onopen = function() {
 // 发送消息到服务器
  socket.send('Hello from sender!');
};

在接收消息的标签页中：

// 创建一个 WebSocket 连接
const socket = new WebSocket('ws://example.com');
// 监听来自服务器的消息
socket.onmessage = function(event) {
  console.log('Received message:', event.data);
};

在服务器端：

// 创建一个 WebSocket 服务器
const WebSocketServer = require('ws').Server
const wss = new WebSocketServer({ port: 8080 })
// 监听来自客户端的连接
wss.on('connection', function (socket) {
  // 监听来自客户端的消息
  socket.on('message', function (message) {
    console.log('Received message:', message)

    // 向所有客户端发送消息
    wss.clients.forEach(function (client) {
      client.send(message)
    })
  })
})

在上述示例中，我们在发送消息的标签页中创建了一个 WebSocket 连接，并在连接成功后发送一条消息到服务器。而在接收消息的标签页中，我们也创建了一个 WebSocket 连接，并监听来自服务器的消息。当服务器收到来自任何客户端的消息时，它会将该消息广播给所有连接的客户端。

总结

这些通信方式各有优劣，选择适合的方式取决于具体的需求和场景。Shared Worker 和 Websocket 提供了实时性和双向通信的能力，适用于需要实时更新和交互的应用。IndexedDB 和 Cookie 则适用于需要存储和同步数据的场景，但相对于实时性较差。根据具体需求，可以选择合适的通信方式来实现跨标签页的通信。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

C语言——字符函数和字符串函数（上）

C语言——字符函数和字符串函数（上）

在编程的过程中&#xff0c;我们经常要处理字符和字符串&#xff0c;为了方便操作字符和字符串&#xff0c;C语⾔标准库中提供了⼀系列库函数&#xff0c;接下来我们就学习⼀下这些函数。 一、 字符分类函数 C语⾔中有⼀系列的函数是专⻔做字符分类的&#xff0c;也就是⼀个字…
阅读更多...
AI Agent应用落地前半场，属于企服软件厂商推出的平台级AI智能体

AI Agent应用落地前半场，属于企服软件厂商推出的平台级AI智能体

GPTs大受欢迎但问题多&#xff0c;企服厂商的AI Agent更被B端客户器重 比尔盖茨预言智能体是下个平台&#xff0c;超自动化平台的AI Agent更靠谱&#xff1f; 以GPTs为代表的AI Agent只是玩具&#xff1f;揭秘真实可用AI智能体长什么样 AI Agent应用落地前半场&#xff0c;属…
阅读更多...
mysql处理40w数据脚本执行慢问题

mysql处理40w数据脚本执行慢问题

需求背景&#xff1a; 2张表 SS_ZYXX 1w数据&#xff0c;WD_GZPZ 50w数据 SS_ZYXX.id WD_GZPZ.zyxx_id 找到SS_ZYXX表有数据&#xff0c;关联表WD_GZPZ没有数据的SS_ZYXX表的id 处理方案 方案一&#xff1a; 联合查询&#xff1a; 下面sql&#xff0c;在mysql执行时间3…
阅读更多...
基于Python的网络爬虫设计与实现

基于Python的网络爬虫设计与实现

基于Python的网络爬虫设计与实现 摘要&#xff1a;从互联网时代开始&#xff0c;网络搜索引擎就变得越发重要。大数据时代&#xff0c;一般的网络搜索引擎不能满足用户的具体需求&#xff0c;人们更加注重特定信息的搜索效率&#xff0c;网络爬虫技术应运而生。本设计先对指定…
阅读更多...
[栈迁移+ret滑梯]gyctf_2020_borrowstack

[栈迁移+ret滑梯]gyctf_2020_borrowstack

题目来源buuctf——gyctf_2020_borrowstack 参考链接https://www.shawroot.cc/2097.html 题目信息ubuntu16、64位 第一个read仅溢出一个机器字长&#xff0c;需要栈迁移 解题步骤栈偏移到全局变量bank中&#xff0c;ret2libcgadget 关键步骤 ret滑梯 第二个payload需要添…
阅读更多...
内网隧道学习

内网隧道学习

默认密码&#xff1a;hongrisec2019 一.环境搭建 网卡学习 一个网卡一个分段&#xff0c;想象成一个管道 192.168.52一段 192.168.150一段 仅主机模式保证不予外界连通&#xff0c;保证恶意操作不会跑到真实机之上 52段是内部通信&#xff0c;150段属于服务器&#xff08;…
阅读更多...
深入理解强化学习——马尔可夫决策过程：备份图（Backup Diagram）

深入理解强化学习——马尔可夫决策过程：备份图（Backup Diagram）

分类目录&#xff1a;《深入理解强化学习》总目录 在本文中&#xff0c;我们将介绍备份&#xff08;Backup&#xff09;的概念。备份类似于自举之间的迭代关系&#xff0c;对于某一个状态&#xff0c;它的当前价值是与它的未来价值线性相关的。 我们将与下图类似的图称为备份图…
阅读更多...
sping boot的配置文件application.properties乱码

sping boot的配置文件application.properties乱码

1.问题描述 查看spingboot项目中的配置信息&#xff0c;即查看application.properties文件&#xff0c;它出现乱码 2.解决问题 File->Settings->Editor->File Encodings 3.验证是否解决乱码
阅读更多...
三维gis中用纹理限定多边形地理区域

三维gis中用纹理限定多边形地理区域

在三维 gis 中经常需要在指定的多边形地理范围内做一些操作&#xff0c;比如地形的多边形裁剪、压平多边形区域内的倾斜摄影模型、在指定地理范围内绘制等间距的点等。这都涉及到限定多边形区域的问题。 所谓的限定多边形地理区域&#xff0c;核心问题在于判断某个片元是否处于…
阅读更多...
如何获取高质量的静态住宅IP代理？常见误区与注意事项

如何获取高质量的静态住宅IP代理？常见误区与注意事项

静态住宅IP代理在今天的网络营销领域扮演着至关重要的角色&#xff0c;静态住宅IP代理以其稳定性和高匿名性&#xff0c;为互联网业务提供了一个安全的执行环境。通过模拟真实用户的网络行为&#xff0c;这些IP代理降低了企业在网络营销活动中被识别和封禁的风险。它保护了企业…
阅读更多...
this.$refs,salesRankRefjj.searchRankCall is not a function

this.$refs,salesRankRefjj.searchRankCall is not a function

在vue项目中&#xff0c;在父组件使用$refs获取不到子组件的方法&#xff0c;为什么&#xff1f; 我的报错如下&#xff1a; [Vue wamn]: Error in v-on handler: "TypeError: this.$refs,salesRankRefjj.searchRankCall is not a function found in 代码如下&#xff1a…
阅读更多...
Ultipa参加国际科学会议KGSWC2023

Ultipa参加国际科学会议KGSWC2023

近日&#xff0c;领先的国际科学会议 KGSWC 2023&#xff0c;在西班牙萨拉戈萨大学召开&#xff0c;Ultipa Graph参加。 KGSWC2023是第五届伊比利亚-美洲会议和第四届印度-美洲知识图谱与语义网大会的联合论坛。自2019年成立以来&#xff0c;KGSWC一直是一个重要的学术活动&am…
阅读更多...
陶陶摘苹果、跳跃游戏

陶陶摘苹果、跳跃游戏

1. 陶陶摘苹果 题目描述&#xff1a; 陶陶家的院子里有一棵苹果树&#xff0c;每到秋天树上就会结出 10 个苹果。苹果成熟的时候&#xff0c;陶陶就会跑去摘苹果。陶陶有个 30 厘米高的板凳&#xff0c;当她不能直接用手摘到苹果的时候&#xff0c;就会踩到板凳上再试试。 现在…
阅读更多...
蓝桥杯-01简介

蓝桥杯-01简介

文章目录 蓝桥杯简介参考资源蓝桥杯官网第15届大赛章程一、概况&#xff08;一&#xff09;大赛背景和宗旨&#xff08;二&#xff09;大赛特色&#xff08;三&#xff09;大赛项目1.Java软件开发2.C/C程序设计3.Python程序设计4.Web应用开发5.软件测试6.网络安全7.嵌入式设计与…
阅读更多...
文件服务器迁移

文件服务器迁移

文件服务器迁移还是比较简单的 win server加域 导出配额文件 选中所有项&#xff0c;点击导出 导出共享文件夹权限列表 导出文件夹的权限表&#xff0c;留作备用。需要用到“icacls” icacls c:\windows\* /save aclfile /t # C:\Windows 目录及其子目录中所有文件的 DAC…
阅读更多...
性能自动化测试？

性能自动化测试？

一、思考❓❔ 1.什么是性能自动化测试? 性能 系统负载能力超负荷运行下的稳定性系统瓶颈 自动化测试 使用程序代替手工提升测试效率性能自动化 使用代码模拟大批量用户让用户并发请求多页面多用户并发请求采集参数&#xff0c;统计系统负载能力生成报告 2.Python中的性能…
阅读更多...
【Vue】vue指令

【Vue】vue指令

目录 V-html v-show和v-if v-show 显示 隐藏 v-if 显示 隐藏 总结 显示隐藏的应用场景 未登录的情况 登录的情况 v- else 和 v-else-if v-if 和v-else v-if 和 v-else-if 总结&#xff1a; v-on 语法一&#xff1a; 语法二&#xff1a; 调用传参 v-bind…
阅读更多...
微信小程序实现微信登录

微信小程序实现微信登录

文章目录 涉及到的微信官方文档login.wxml效果login.wxml login.js效果login.jsutil.js 后端&#xff08;使用django&#xff09;urls.pyviews.py 流程&#xff1a; 1. wx.getUserProfile() 会调出获取用户微信的页面 2. 当用户点击“允许”后&#xff0c;wx.login() 带着code去…
阅读更多...
深度解析Python JSON库：全面掌握函数与方法，学会JSON数据处理

深度解析Python JSON库：全面掌握函数与方法，学会JSON数据处理

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com JSON&#xff08;JavaScript Object Notation&#xff09;在现代编程中被广泛应用&#xff0c;它是一种轻量级的数据交换格式。Python提供了内置的JSON库&#xff0c;允许在Python中解析和序列化JSON数据。本文将…
阅读更多...
图片照片编辑SDK解决方案

图片照片编辑SDK解决方案

图像和照片已经成为我们日常生活中不可或缺的一部分&#xff0c;无论是个人还是企业&#xff0c;都希望通过高质量的图像和照片来提升品牌形象&#xff0c;吸引更多的用户和客户。然而&#xff0c;图像和照片的编辑并不是一件简单的事情&#xff0c;它需要专业的技术和工具。这…
阅读更多...
最新文章

Copyright @ 2022~2023