JS在页面之间传递数据

在Web开发中，经常需要在页面之间传递数据，而JavaScript可以很方便地实现这个功能。本文将介绍三种常见的JS页面间数据传递方式。

1. URL参数传递

URL参数传递是指在URL中携带数据，如下面例子所示：

http://example.com/index.html?name=jack&age=20

其中"?"后面的部分就是传递的数据，多个数据之间用"&"分隔，可以通过location.search获取该字符串，然后对其进行解析，得到传递的数据。

const params = new URLSearchParams(location.search);
const name = params.get('name'); // jack
const age = params.get('age'); // 20

URL参数传递的优点是简单易用，但也存在一些缺点。例如，URL长度有限制，无法传递大量数据；而且URL中的参数可以被用户修改，存在安全风险。

2. LocalStorage传递

LocalStorage是HTML5新增的API，用于在浏览器端存储数据，可以跨页面访问。使用LocalStorage可以将数据持久化存储到本地，如下面例子所示：

// 页面1
localStorage.setItem('name', 'jack');

// 页面2
const name = localStorage.getItem('name'); // jack

LocalStorage传递数据的优点是可跨页面访问，可以存储大量数据，不受URL长度限制。但也存在一些缺点，例如数据存储在本地，无法跨域访问；而且LocalStorage的数据类型有限，只能存储字符串类型的数据。

3. Window.postMessage传递

Window.postMessage是HTML5的一个API，允许在不同的浏览上下文之间传递数据。使用Window.postMessage可以将数据安全地传递给另一个页面，如下面例子所示：

// 页面1
const targetWindow = window.parent; // 目标窗口
targetWindow.postMessage({name: 'jack', age: 20}, '*'); // 发送消息

// 页面2
window.addEventListener('message', event => {
  const data = event.data; // 接收消息
  console.log(data.name); // jack
  console.log(data.age); // 20
});

Window.postMessage传递数据的优点是安全可靠，可以跨域访问，也不受URL长度限制。但也存在一些缺点，例如Window.postMessage需要双方协商好消息格式，存在格式匹配问题；而且这种方式只能在同一浏览器窗口内有效，在不同的窗口之间无法传递数据。

总结

三种页面间数据传递方式各有优缺点，可以根据实际需求选择合适的方式。在应用中，也可以综合考虑多种方式的优点，结合使用，以达到更好的效果。