目录
1、BroadCast Channel
2、Service Worker
3、LocalStorage
4、Shared Worker
5、IndexedDB
6、Cookie
7、Window
8、Websocket
总结：
1、BroadCast Channel
1、创建文件sender.html
发送消息
2、创建文件receiver.html
接收消息
2、Service Worker
1、创建文件sender.html
发送消息
2、创建文件receiver.html
接收消息
3、创建文件service-worker.js
self.addEventListener('message', event => {
const message = event.data.message
// 将消息转发给所有客户端
self.clients.matchAll().then(clients => {
clients.forEach(client => {
client.postMessage({ message })
})
})
})
3、LocalStorage
1、创建文件sender.html
发送消息
2、创建文件receiver.html
接收消息
4、Shared Worker
1、创建文件sender.html
发送消息
2、创建文件receiver.html
接收消息
3、创建文件shared-worker.js
// sharedWorker.js
let connections = []
onconnect = function (e) {
const port = e.ports[0]
connections.push(port)
port.onmessage = function (event) {
// 广播接收到的消息给所有连接的端口
connections.forEach(conn => {
if (conn !== port) {
conn.postMessage(event.data)
}
})
}
port.start()
}
5、IndexedDB
1、创建文件sender.html
发送消息
2、创建文件receiver.html
接收消息
6、Cookie
1、创建文件sender.html
发送消息
2、创建文件receiver.html
接收消息
7、Window
1、创建文件sender.html
发送消息
2、创建文件receiver.html
接收消息
8、Websocket
1、创建文件sender.html
发送消息
2、创建文件receiver.html
接收消息
3、创建文件server.js
const WebSocket = require('ws')
const wss = new WebSocket.Server({ port: 8080 })
wss.on('connection', ws => {
console.log('新客户端连接')
ws.on('message', message => {
console.log(`收到消息: ${message}`)
// 广播给所有连接的客户端
wss.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(message.toString())
}
})
})
ws.on('close', () => {
console.log('客户端断开连接')
})
})
console.log('WebSocket 服务器正在运行，监听端口 8080')
4、运行服务器：
npm install ws
node server.js
总结：
1. Broadcast Channel
优点：
简单易用，API 直观。支持多个标签页间的实时通信。可以发送任意类型的消息（字符串、对象等）。缺点：
数据传递是基于消息的，可能会有延迟。不适合大量数据传输。需要支持的浏览器较新，兼容性可能有限。
2. Service Worker
优点：
支持离线操作，可以在网络断开时继续工作。能够拦截网络请求，提供更大的灵活性。可以用于后台处理和数据缓存。缺点：
配置和实现相对复杂。不能直接访问 DOM，使用场景有限。需要注册和管理生命周期。
3. LocalStorage
优点：
简单易用，支持持久化存储。在同一源（origin）下，所有标签页共享相同的数据。缺点：
同步方式，可能会有数据更新延迟。存储容量有限（通常为 5MB）。不支持跨源数据共享。
4. Shared Worker
优点：
可以被多个标签页和窗口共享，适合复杂应用。允许更高效的数据共享与通信。缺点：
实现较复杂，需要理解 worker 的生命周期。需要支持的浏览器较新。有时会受到同源政策的限制。
5. IndexedDB
优点：
支持大规模数据存储（数百 MB 甚至更多）。结构化数据存储，支持复杂查询。异步操作，不会阻塞主线程。缺点：
API 较复杂，上手难度较高。需要考虑数据库版本控制和事务处理。数据可能需要在不同标签页间进行同步。
6. Cookie
优点：
兼容性好，几乎所有浏览器都支持。可以设置过期时间，适合需要持久化的简单数据。缺点：
数据容量有限（通常为 4KB）。频繁的网络请求可能导致性能问题。安全性较低，容易受到 CSRF 攻击。
7. Window
优点：
可以直接访问浏览器窗口和标签页，适合简单的数据传递。在同一源的标签页间可以直接通过 window.opener 或 window.name 共享数据。缺点：
不适合复杂的数据共享，限制较多。依赖于窗口的打开方式，局限性大。难以管理多个标签页间的数据状态。
8. WebSocket
优点：
实时双向通信，适合需要快速响应的数据共享。适合大规模和高频率的数据传输。缺点：
需要服务器支持，增加了实现的复杂性。可能涉及更多的安全性和连接管理问题。不适合简单的数据共享，通常用于更复杂的应用场景。