JS中跳转传参的几种方法

在JavaScript中，实现页面跳转并传递参数可以通过以下几种方法：

1. 使用查询字符串（Query Strings）:

window.location.href = 'page2.html?param1=value1&param2=value2';

在page2.html中，可以使用URLSearchParams对象来获取参数：

const params = new URLSearchParams(window.location.search);
const param1 = params.get('param1');
const param2 = params.get('param2');

2. 使用sessionStorage或localStorage存储数据，然后在目标页面读取：

// 在页面1中存储数据
sessionStorage.setItem('param1', 'value1');
localStorage.setItem('param2', 'value2');
window.location.href = 'page2.html';
 
// 在页面2中获取数据
const param1 = sessionStorage.getItem('param1');
const param2 = localStorage.getItem('param2');

3. 使用postMessage方法在不同页面的文档间传递数据：

// 在页面1中
window.location.href = 'page2.html';
window.onload = () => {
  window.opener.postMessage({ param1: 'value1', param2: 'value2' }, '*');
};
 
// 在页面2中
window.addEventListener('message', (event) => {
  const params = event.data;
  const param1 = params.param1;
  const param2 = params.param2;
});

4. 使用cookie传递参数：

// 在页面1中
document.cookie = "param1=value1; path=/";
document.cookie = "param2=value2; path=/";
window.location.href = 'page2.html';
 
// 在页面2中
function getCookie(name) {
  let cookieArr = document.cookie.split(';');
  for(let i = 0; i < cookieArr.length; i++) {
    let cookiePair = cookieArr[i].split('=');
    if(name == cookiePair[0].trim()) {
      return decodeURIComponent(cookiePair[1]);
    }
  }
  return null;
}
const param1 = getCookie('param1');
const param2 = getCookie('param2');

以上方法可以根据实际需求选择使用。