带你读《现代Javascript高级教程》二十一、前端跨页面通信:实现页面间的数据传递与交互(2)

简介: 带你读《现代Javascript高级教程》二十一、前端跨页面通信:实现页面间的数据传递与交互(2)

带你读《现代Javascript高级教程》二十一、前端跨页面通信:实现页面间的数据传递与交互(1)https://developer.aliyun.com/article/1349531?groupCode=tech_library


4. 前端跨页面通信的实现方法

在前端中,有多种方法可以实现跨页面通信。下面介绍几种常用的实现方法:

1 Cookie

Cookie是一种在浏览器中存储数据的机制,可以通过设置Cookie的值在不同页面之间传递数据。通过设置相同的Cookie名称和值,不同的页面可以读取和修改Cookie的值,实现跨页面数据的传递和共享。

 

使用Cookie进行跨页面通信的示例代码如下:

 

// 在页面 A 中设置 Cookie
document.cookie = "data=example";
// 在页面 B 中读取 Cookieconst cookies = document.cookie.split("; ");for (let i = 0; i < cookies.length; i++) {
  const [name, value] = cookies[i].split("=");
  if (name === "data") {
    console.log(value); // 输出 "example"
    break;
  }}

2 LocalStorage 和 SessionStorage

LocalStorage和SessionStorage是浏览器提供的本地存储机制,可以在不同页面之间存储和读取数据。它们的区别在于数据的生命周期,LocalStorage中的数据在浏览器关闭后仍然保留,而SessionStorage中的数据在会话结束后被清除。

 

使用LocalStorage进行跨页面通信的示例代码如下:

 

// 在页面 A 中存储数据到 LocalStorage
localStorage.setItem("data", "example");
// 在页面 B 中读取 LocalStorage 的数据const data = localStorage.getItem("data");
console.log(data); // 输出 "example"

3 Broadcast Channel

Broadcast Channel是浏览器提供的API,用于在不同页面之间进行消息广播和接收。通过Broadcast Channel,我们可以创建一个频道,并在不同的页面之间发送和接收消息。

 

使用Broadcast Channel进行跨页面通信的示例代码如下:

 

// 在页面 A 中创建 Broadcast Channelconst channel = new BroadcastChannel("myChannel");
// 在页面 B 中监听消息
channel.addEventListener("message", (event) => {
  console.log(event.data); // 输出接收到的消息});
// 在页面 A 中发送消息
channel.postMessage("Hello from Page A");

4 Window.postMessage

Window.postMessage是浏览器提供的API,用于在不同窗口或框架之间进行安全的跨页面通信。通过Window.postMessage,我们可以向其他窗口发送消息,并接收其他窗口发送的消息。

 

使用Window.postMessage进行跨页面通信的示例代码如下:

// 在页面 A 中发送消息给页面 B
window.opener.postMessage("Hello from Page A", "https://www.example.com");
// 在页面 B 中监听消息
window.addEventListener("message", (event) => {
  if (event.origin === "https://www.example.com") {
    console.log(event.data); // 输出接收到的消息
  }});

5. 参考资料

  • MDN Web Docs - Window.postMessage()open in new window
  • MDN Web Docs - BroadcastChannelopen in new window
  • MDN Web Docs - Cookieopen in new window
  • MDN Web Docs - Web Storage APIopen in new window
  • Using the Broadcast Channel API for JavaScript communication between tabsopen in new window
  • Cross-window communication using postMessageopen in new window
  • Window Communication in JavaScript: A Comprehensive Guide

 

相关文章
|
9天前
|
JSON JavaScript 前端开发
【JavaScript技术专栏】JavaScript的跨域通信方法
【4月更文挑战第30天】本文探讨了JavaScript中的跨域通信方法,包括:同源策略和跨域通信的概念,以及JSONP、CORS、WebSockets、`window.postMessage()`、代理服务器和WebAssembly的使用。这些技术各有优劣,适用于不同的场景,是Web开发者解决跨域问题的关键工具。随着Web技术的演进,跨域通信的解决方案也将不断更新。
|
3天前
|
前端开发 JavaScript Java
web 技术中前端和后端交互过程
客户端:上网过程中,负责浏览资源的电脑,叫客户端
13 0
|
6天前
|
前端开发 JavaScript
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
|
6天前
|
前端开发 JavaScript Java
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
|
6天前
|
JavaScript 前端开发
web前端JS高阶面试题(1),高级开发工程师面试
web前端JS高阶面试题(1),高级开发工程师面试
|
8天前
|
设计模式 存储 消息中间件
JavaScript观察者模式:实现对象间的事件通信!
JavaScript观察者模式:实现对象间的事件通信!
|
8天前
|
前端开发 关系型数据库 MySQL
SpringBoot-----从前端更新数据到MySql数据库
SpringBoot-----从前端更新数据到MySql数据库
17 1
|
9天前
|
JavaScript 前端开发
js的交互事件
js的交互事件
21 1
|
9天前
|
JSON JavaScript Java
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
28 0
|
9天前
|
Dart 前端开发 Android开发
【Flutter前端技术开发专栏】Flutter与原生代码的集成与交互
【4月更文挑战第30天】本文探讨了如何在Flutter中集成和交互原生代码,以利用特定平台的API和库。当需要访问如蓝牙、特定支付SDK或复杂动画时,集成原生代码能提升效率和性能。集成方法包括:使用Platform Channel进行通信,借助现有Flutter插件,以及Android和iOS的Embedding。文中通过一个电池信息获取的例子展示了如何使用`MethodChannel`在Dart和原生代码间传递调用。这些技术使开发者能充分利用原生功能,加速开发进程。
【Flutter前端技术开发专栏】Flutter与原生代码的集成与交互