前端开发逃避不开跨页面通信这项工作，跨页面通信，就好比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页面如果需要加载这张图片，是否还需要走

发送图片请求图片服务器响应请求浏览器下载图片浏览器解析图片浏览器渲染图片

这个过程了呢？很显然，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公共方法大全