一文搞懂前端跨页面通信的那些方案们_前端双页面通讯

前端开发逃避不开跨页面通信这项工作，跨页面通信，就好比A页面要和B页面说话，可能只是说一句话，不需要回话，可能是要给一些东西，希望得到回复，并频繁进行沟通，接下来我们说说这些跨页面通信的方案们，希望对你有所帮助。

目录

1 页面传参

2 页面路由传参

3 后端接口做为中转站 

4 图片预加载

5 前端状态管理工具

6 Cookie、localStorage、SessionStorage

7 PostMessage

8 IndexedDB

9 共引JS文件

10 小结

---

1 页面传参

例如我们在浏览器的url中的问号后面带入参数，希望通过参数将一些信息带到其他页面中去，通常是类似于?a=xx&b=xx这种。这种是属于一种get请求的方式，链接长度有限，而且破坏域名的美观性，如果链接上带有关键信息页不安全。

至于目标页面获取参数值，可以参考前端工具npm包，js-tool-big-box中的现有方法：

// window.location.href = 'http://localhost:8080/#/404?type=text&go2=232323&q=my2521';
const param = storeBox.getUrlParam('q');
console.log('获取到q的参数为：：：', param);

2 页面路由传参

这种和第一种方式类似，但会把参数拼接到前端路由上，这种方式会以hash或者history的形式传递参数，类似于/#/:id/:name 这种方式。获取方式在vue2项目中可以这样：

// 页面Url示例
https://a.xx.com/detail/DXF00137
 
// detail页获取 bookId
created() {
  let bookId = this.$route.params.id
}

在react项目中就五花八门多了去了，你用不同的架构后，会发现各种各样。没办法，前端就是很乱套，很多团队没事干，加班加点希望做出东西来对外赋能，然后还得有自己的特点，怎么办呢？HTML，这个东西，我们读成“阿吃题迈而”吧，显得高端。 

3 后端接口做为中转站 

这个很好理解，我们几乎每天都在用。比如A页面有个金额，我们计算出来，提交给后端，让后端存着，等到了B页面，又需要这个金额了，我们再获取一下这个金额，到了某一步，再提交一下。反正就是接口来回传输呗，安全。

与之类似的还有websocket交互，例如A页面发送了一条申请信息，你可以在B页面通过这种实时通信方式，获取到审核结果消息，比如弹出一个小红点啥的，避免轮训请求浪费流量。

4 图片预加载

这个图片预加载也跟跨页面通信有关系吗？你有没有想过一个问题，如果我在A页面加载过一个图片，然后我把这个图片的DOM元素删除了，那么B页面如果需要加载这张图片，是否还需要走

1. 发送图片请求
2. 图片服务器响应请求
3. 浏览器下载图片
4. 浏览器解析图片
5. 浏览器渲染图片

这个过程了呢？很显然，B页面会节约很大的线路。所以图片懒加载是属于这一类性能优化跨页面通信的范畴，这也属于我提前把东西准备好，准备随时交给B页面的一种方式。

5 前端状态管理工具

类似于Vuex、Redux这种，可能说详细点，不属于跨越面通信的范畴，因为我们使用vue或者react这种工具，大多数时候，用于单页面的场景。但对于用户来说，他哪知道啥单页面不单页面的，发展我看你们那么多页面来回跳呢。

而这个时候，我们通常会使用这些状态管理工具来保存或者共享一些数据，可以使页面不刷新，不发送请求，也可以获取到共享的状态数据。例如项目中多处会用到用户名，这种方式就恰到好处。

6 Cookie、localStorage、SessionStorage

这三类工具，都有一个共通点，他们不跨域，但是可以跨页面共享数据。cookie兼容性好，但使用起来需要写公共方法，不如另外2个使用简单。不过这些方法在前端公用工具包js-tool-big-js里，也都封装了便捷的方法，使用示例可参照这篇学习文档：获取浏览器参数、cookie、localStorage的存取的便捷方法学习

说到cookie跨域不跨域这个问题，它本身是不跨域的。但你可以在A页面的时候，在前后端交互中携带cookie，这样后端就可以获取到cookie信息。后端就可以指定往某个域下再写入cookie，这样B页面即便和A页面不在同一个域下，不也就得到这个cookie信息了嘛。这样是不是就得到了一个更多的跨域解决方案呢。

7 PostMessage

postMessage的宿主是window，可以在不同窗口下通信。比如我们常做的一些第三方登录，授权等场景需求，你肯定是需要将第三方的授权页面弹出来，放在自己的准备好的一个 window.open 弹框中，这样，等获取到第三方授权信息后，再通过window.postMessage()方法向本页面发送message信息，从而达到跨页面通信的效果。

这里说一下SharedWorker，SharedWorker 是一个可由多个窗口或标签页共享的 Web Worker，它可以在不同页面之间进行跨页面通信。通过 SharedWorker，多个页面可以通过 postMessage 进行双向通信，并共享数据和执行操作。

8 IndexedDB

说到indexedDB，我觉得这真是一项创举。他是浏览器提供的一个客户端数据库，既然是数据库，就说明他希望比localStorage更进一步，存入更多的东西。

很多时候，其实我们用不到，因为普通浏览器的web项目，用户的缓存还免不了丢失呢，你还存，能存多少。但架不住前端页面有时候钻进了APP里，这样他就被保护起来了吧，你就可以安心的存了。

但前端数据库，始终还是一个临时性的东西，最好还是让后端去存吧。

9 共引JS文件

说了这么多复杂用法的东西，你是不是忘记了我们javascript第一课学到的东西呢。也是最基本的用法。不就是个跨页面通信嘛，我写一个公共变量，然后让所有页面都引入这个JS文件，我就不信，你再跨页面，你还获取不到这个公共变量吗？谁说通信就必须来回交互了，你跟女朋友打电话，女朋友嗓子疼，你说话，他不说话，他就听着，难道不行？咋地，这种打电话难道不叫通信？面试那么多，有几个HR在面完了，会给你反馈结果的。

10 小结

本文一共说了9种方式的跨页面通信，而这9种里面有的又包含了小类方案，你可以自己总结一下，结合自己的项目案例说的更真实有经验一些，这在面试的时候就是自己的方案了。

然后我总结了前端开发，必须知道的，也是特别实用的公共方法大全：「终极收藏」前端开发必备：超全JavaScript公共方法大全