JavaScript 怎样获取其他页面的值

在网页开发中，经常会遇到需要在 JavaScript 里获取其他页面的值的情况。这一操作能够实现页面间的数据传递与交互，极大地提升用户体验和网站功能的完整性。

一种常用的方法是通过 URL 参数来传递值。在源页面构建带有参数的 URL，例如 window.location.href = "targetPage.html?name=John&age=30";。这里，name 和 age 就是传递的参数。在目标页面，使用 JavaScript 解析 URL 参数。可以通过 window.location.search 获取到 ? 后面的参数部分，然后编写函数来解析这些参数。示例代码如下：

function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
    return results === null? '' : decodeURIComponent(results[1].replace(/\+/g,''));
}
var name = getUrlParameter('name');
var age = getUrlParameter('age');

另一种有效的方式是使用 Web Storage，包括 localStorage 和 sessionStorage。在源页面存储数据，比如 localStorage.setItem('userData', JSON.stringify({name: 'John', age: 30}));。这里将数据以 JSON 字符串的形式存储。在目标页面，就可以通过 var userData = JSON.parse(localStorage.getItem('userData')); 获取数据。需要注意的是，localStorage 存储的数据除非手动清除，否则会一直存在，而 sessionStorage 存储的数据在页面会话结束（关闭浏览器标签页）时就会被清除。

如果是同源页面间获取值，还可以使用 postMessage API 进行跨窗口或跨 iframe 通信。在源页面使用 window.postMessage(data, targetOrigin); 发送数据，其中 data 是要发送的数据，targetOrigin 是目标页面的源。在目标页面监听 message 事件来接收数据，window.addEventListener('message', function(event) { var receivedData = event.data; });。

掌握这些获取其他页面值的方法，能让开发者在构建复杂的 Web 应用时更加得心应手，实现高效的数据交互与页面协作，为用户带来更流畅、功能丰富的体验。