-
LocalStorage 或 SessionStorage:这两个 Web 存储 API 可以在不同页面之间共享数据。一个页面可以将数据存储在本地存储中,另一个页面则可以读取该数据并进行相应处理。通过监听 storage 事件,可以实现数据的实时更新。
-
Cookies:使用 Cookies 也可以在不同页面之间传递数据。通过设置和读取 Cookie 值,可以在同一域名下的不同页面之间交换信息。
-
PostMessage :
window.postMessage()
方法允许从一个窗口向另一个窗口发送消息,并在目标窗口上触发 message 事件。通过指定目标窗口的 origin,可以确保只有特定窗口能够接收和处理消息。 -
Broadcast Channel:Broadcast Channel API 允许在同一浏览器下的不同上下文(例如,在不同标签页或 iframe 中)之间进行双向通信。它提供了一个类似于发布-订阅模式的机制,通过创建一个广播频道,并在不同上下文中加入该频道,可以实现消息的广播和接收。
-
SharedWorker:SharedWorker 是一个可由多个窗口或标签页共享的 Web Worker,它可以在不同页面之间进行跨页面通信。通过 SharedWorker,多个页面可以通过 postMessage 进行双向通信,并共享数据和执行操作。
-
IndexedDB:IndexedDB 是浏览器提供的一个客户端数据库,可以在不同页面之间存储和共享数据。通过在一个页面中写入数据,另一个页面可以读取该数据。
-
WebSockets:WebSockets 提供了全双工的、双向通信通道,可以在客户端和服务器之间进行实时通信。通过建立 WebSocket 连接,可以在不同页面之间通过服务器传递数据并实现实时更新。
前端跨页面通信方法
weixin_439620202023-12-29 19:11
相关推荐
遂心_18 分钟前
深入理解 React Hook:useEffect 完全指南Moonbit20 分钟前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !龙在天25 分钟前
ts中的函数重载卓伊凡40 分钟前
非常经典的Android开发问题-mipmap图标目录和drawable图标目录的区别和适用场景实战举例-优雅草卓伊凡前端Hardy41 分钟前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气前端Hardy43 分钟前
HTML&CSS:好精致的导航栏天下无贼1 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)我是天龙_绍1 小时前
🔹🔹🔹 vue 通信方式 eventBus一个不爱写代码的瘦子2 小时前
迭代器和生成器拳打南山敬老院2 小时前
漫谈 MCP 构建之概念篇