跨页面通信的技术方式

在日常开发中难免会遇到需要跨页面通信的场景，例如非常常见的登录场景，点击登录按钮后，将会打开一个新的页面去授权登录，当授权登录成功后，需要将授权信息传递给之前的页面，此时就需要跨页面通信。

1. JavaScript

JavaScript是最常用的跨页面通信技术之一。它可以通过window.opener或window.parent属性来访问父页面，也可以通过window.frames或window.location.href属性来访问子页面。这种方式简单易用，但只能在同源的页面之间通信。

2. postMessage

postMessage是HTML5中引入的一种跨页面通信机制。它允许不同源的页面之间进行通信。postMessage方法的语法如下：

window.postMessage(data, targetOrigin);

其中，data是要发送的数据，targetOrigin是要发送到的页面所在的域。

3. Storage API

Storage API是HTML5中引入的一种存储机制。它允许网页在本地存储数据。Storage API有两种类型：localStorage和sessionStorage。

• localStorage：localStorage的数据在浏览器关闭后仍然存在。
• sessionStorage：sessionStorage的数据在浏览器关闭后消失。

4. Cookies

Cookies是另一种存储机制，它可以将数据存储在客户端的计算机上。Cookies是由服务器发送给浏览器的，浏览器会将Cookies存储在本地计算机上。当浏览器再次访问该服务器时，它会将Cookies发送回服务器。

5. WebSockets

WebSockets是一种双向的通信协议。它允许客户端和服务器之间建立持久的连接。WebSockets可以用于实时通信，例如聊天应用或游戏。

6. AJAX

AJAX（Asynchronous JavaScript and XML）是一种使用JavaScript和XMLHttpRequest对象的异步通信技术。它允许网页向服务器发送请求并接收响应，而无需重新加载页面。

7. Server-Sent Events

Server-Sent Events (SSE)是一种服务器端推送技术。它允许服务器向客户端推送实时数据。SSE可以用于构建实时聊天应用或股票价格更新应用。

总结

上述列出的这七种技术都是实现跨页面通信的有效方式，每种方式都有其优缺点。在选择跨页面通信技术时，应根据具体的需求来选择。

• JavaScript ：简单易用，只能在同源的页面之间通信。
• postMessage ：允许不同源的页面之间进行通信，但需要支持HTML5的浏览器。
• Storage API ：可以将数据存储在本地计算机上，但只能存储字符串类型的数据。
• Cookies ：可以将数据存储在客户端的计算机上，但容易受到XSS攻击。
• WebSockets ：允许客户端和服务器之间建立持久的连接，但需要支持WebSockets的浏览器。
• AJAX ：允许网页向服务器发送请求并接收响应，而无需重新加载页面，但需要支持JavaScript的浏览器。
• Server-Sent Events ：允许服务器向客户端推送实时数据，但需要支持SSE的浏览器。