Comments (19)
完全答案
WebSocket (可跨域)
postMessage(可跨域)
Worker之SharedWorker
Server-Sent Events
localStorage
BroadcastChannel
Cookies
https://xv700.gitee.io/message-communication-for-web/
from fe-interview.
1:本地存储
2:postMessage
如果使用vue框架那么vuex也是ok的
from fe-interview.
PostMessage: 曾经在项目中使用过: 在一个页面内加了一个iframe, 由于父页面要和iframe通信所以使用了这个方式
from fe-interview.
1.websocket
H5提供的在TCP连接上进行的双向通讯
2.localStorage(sessionStorage是每个标签页独立的)
3.cookie
4.SharedWorker
from fe-interview.
- stroage
- postmessage
https://segmentfault.com/a/1190000018386033
from fe-interview.
- 借助
cookie
,localStorage
(sessionStorage
在某些场景下并不能跨标签,必须要原页面的a
标签的target=_blank
才行)。这些只要在同一个域名下就可以进行通信和数据的共享 - 借助
window.postMessage
API 来进行消息的传递
from fe-interview.
1.WebSocket (可跨域)
2.postMessage(可跨域)
3.SharedWorker
4.Server-Sent Events
5.localStorage
6.BroadcastChannel IE不支持
7.Cookies
from fe-interview.
- localStorage
- cookie + setInterval
from fe-interview.
不借助服务器支持的话:
- 监听storage事件
- cookie + setInterval
- BroadcastChannel (兼容:chrome 54+ ,firefox:38+, Edge 76 +, safari 13, IE尚不支持)
- SharedWorker
from fe-interview.
websocket协议、
localstorage、
以及使用html5浏览器的新特性SharedWorker
from fe-interview.
完全答案
WebSocket (可跨域)
postMessage(可跨域)
Worker之SharedWorker
Server-Sent Events
localStorage
BroadcastChannel
Cookies
from fe-interview.
尝试过的
localStroage
WebScoket
from fe-interview.
这个题目有些含糊,多个标签指的是在同一个域下的多个标签还是不同域下的多个标签。尝试回答下:
跨域
- websocket
- postMessage(推荐)
非跨域
- cookie
- localStorage
from fe-interview.
localstorage
sessionstorage
websocket
from fe-interview.
1.WebSocket(可跨域)
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
2.postMessage(可跨域)
window.postMessage()方法安全地启用Window对象之间的跨源通信。
3.SharedWorker
SharedWorker可以被多个window共用,所以可以用来跨页面传输数据,但必须保证这些标签页都是同源的(相同的协议,主机和端口号)
4.Server-Sent Events
HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新。
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。
5.localStorage(可以添加事件监听)
ocalstorage是浏览器多个标签共用的存储空间,所以可以用来实现多标签之间的通信,直接在window对象上添加监听即可。
ps:sessionStorage是会话级的存储空间,每个标签页都是单独的
6.Cookies
Cookies在同一个域名内,并且目录也得相同
7.BroadcastChannel(Chrome商店的api)
只要是在同一原始域和用户代理下,所有窗口、iframe之间都可以进行交互。感觉就类似于广播。
from fe-interview.
cookie,localstorage实现标签间的存储
from fe-interview.
1.localStorage
2.webSocket
3.sharedWorker
4.cookie+sentlnterval
from fe-interview.
websocket
postMessage
localStorage
sharedWorker
cookie
from fe-interview.
-
cookie + setInterval方式
缺点:
- cookie空间有限,浏览器在每一个域名下最多能设置30-50个cookie,容量最多为4k左右。
- 每次HHTP请求才会把当前域的cookie发送到服务器上,包括只在本地才用到的而服务器不用的,浪费带宽。
- setInterval频率设置过大会影响浏览器的性能,过小会影响时效性。
优点:每个浏览器都兼容
-
localStorage方式
- 缺点:1、localStorage是h5的属性,高版本的浏览器才支持,而且不同浏览器localStorage大小了限制不统一。2、localStorage只能监听非己页面的数据变化。
- 优点:解决了cookie容量小和时效性的问题。
-
webSocket方式
前面两种方式只用到了客户端,没有用到服务端,只用到了浏览器就完成了多个窗口的通信。而webSocket需要用到服务端,send.html发送消息到WebSocketServer,WebSocketServer再实时把消息发给receive.html,其实这就是实时通信的原理(微信、qq、淘宝旺旺等)
- 缺点:1、它需要服务端的支持才能完成任务。如果socket数据量比较大的话,会严重消耗服务器的资源。
2、必须要在服务端项目中写服务端监听程序才能支持。 - 优点:使用简单(客户端简单,服务端苦逼了),功能灵活、强大,如果部署了WebSocket服务器,可以实现很多实时的功能。
- 缺点:1、它需要服务端的支持才能完成任务。如果socket数据量比较大的话,会严重消耗服务器的资源。
-
SharedWorker方式
WebWorker的升级版,WebWorker只能在一个窗口内使用,而现在我们需求是多个窗口之间通信,就要用SharedWorker了。
SharedWorker原理和WebWorker几乎是一样的,只不过SharedWorker可以跨多个页面使用。
SharedWorker也是纯客户端的,没有服务端的参与。
SharedWorker在客户端有一个自己维护的对象worker.js,消息存储在worker.js中的data中
SharedWorker不如localStorage的是接收消息不是自动的,也要用定时器实时从worker.js中获取消息。
from fe-interview.
Related Issues (20)
- [angular] 第1803天 请说说在Angular中什么是服务和依赖注入(DI)?
- [angular] 第1804天 请说说路由和导航在Angular中如何工作的?
- [angular] 第1805天 请说说在Angular中如何实现表单验证?
- [angular] 第1806天 请说说观察者模式和RxJS在Angular中的应用
- [angular] 第1807天 请说说在Angular中的双向数据绑定是如何工作的?
- [angular] 第1808天 请说说在Angular中如何实现国际化(i18n)?
- [angular] 第1809天 如何在Angular中实现懒加载?
- [angular] 第1810天 如何在Angular中实现导航的控制和保护?
- [angular] 第1811天 请说说在Angular中什么是RxJS?
- [angular] 第1812天 请说说在Angular中的ngFor是什么?有哪些用途? HOT 1
- [angular] 第1813天 请说说在Angular中的路由器是什么?
- [angular] 第1814天 请说说在Angular中的ngSwitch是什么?有哪些用途?
- [angular] 第1815天 请说说在Angular中的组件是什么?
- [angular] 第1816天 请说说在Angular中什么是指令?有哪些类型的指令?
- [angular] 第1817天 请说说在Angular中的依赖注入是什么?
- [angular] 第1818天 请说说在Angular中的NgModule是什么?
- [angular] 第1819天 请说说在Angular中的可观察对象是什么?
- [angular] 第1820天 请说说在Angular中的路由器守卫是什么?它有哪些类型?
- [angular] 第1821天 请说说在Angular中的服务是什么?如何创建一个服务?
- [angular] 第1822天 请说说在Angular中的模板语法是什么?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fe-interview.