前端开发逃避不开跨页面通信这项工作，跨页面通信，就好比A页面要和B页面说话，可能只是说一句话，不需要回话，可能是要给一些东西，希望得到回复，并频繁进行沟通，接下来我们说说这些跨页面通信的方案们，希望对你有所帮助。
目录
6 Cookie、localStorage、SessionStorage
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公共方法大全
转载自CSDN-专业IT技术社区
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/xingyu_qie/article/details/138565489
