JavaScript 实现页面跳转并传值

在网页开发中，实现页面跳转并传递数据是一个常见的需求。JavaScript 作为前端开发的重要语言，提供了多种方式来达成这一目标。

首先是使用 URL 参数来传递值。我们可以通过修改 window.location.href 来实现页面跳转，并将需要传递的数据附加在 URL 后面作为参数。例如：

let data = "exampleValue";
window.location.href = "targetPage.html?data=" + data;

在目标页面中，可以通过解析 URL 参数来获取传递的值。可以使用以下方法：

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

let receivedData = getUrlParameter('data');

这种方式简单直观，但缺点是传递的数据会暴露在 URL 中，不太适合传递敏感信息。

另一种常见的方法是使用 sessionStorage 或 localStorage。在源页面存储数据：

let data = "exampleValue";
sessionStorage.setItem('dataKey', data);
// 或者 localStorage.setItem('dataKey', data);
window.location.href = "targetPage.html";

在目标页面获取数据：

let receivedData = sessionStorage.getItem('dataKey');
// 或者 let receivedData = localStorage.getItem('dataKey');
// 使用完后如果是sessionStorage可以选择清除数据
sessionStorage.removeItem('dataKey');

sessionStorage 存储的数据在页面会话期间有效，关闭页面后数据消失；localStorage 存储的数据除非主动清除，否则会一直存在。这种方式相对安全，适合传递较多的数据，但要注意数据容量限制。

还可以通过 postMessage API 在不同窗口或 iframe 之间进行安全的跨域数据传递和页面跳转。

JavaScript 提供了多种灵活的方式来实现页面跳转并传值。开发者可以根据具体的需求，如数据安全性、数据量大小以及应用场景等，选择最合适的方法，以打造出功能强大且用户体验良好的网页应用。