如何用Vanilla JavaScript跳转页面并动态更新模板数据？

我正在创建一个函数，期望点击按钮时打开现有的HTML模板页面，并通过函数传递的参数更新该页面的数据，以此避免硬编码多个页面，根据用户菜单点击动态生成页面。目前代码可实现页面跳转，但无法更新数据，请问如何用原生JavaScript实现该功能？另外，若实现该功能，多用户同时点击会产生什么影响？

提供的代码示例 #

主页面代码

<!DOCTYPE html>
<html>
<head>
    <script src="js/tester.js"></script>
    <title>Document</title>
</head>
<body>
    <button onclick="load('dpdate one', 'update two', 'update three')"> Update </button>
</body>
</html>

模板页面代码

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <script src="js/tester.js"></script>
</head>
<body>
    <p class="one">Not updated</p>
    <p class="two">Not updated</p>
    <p class="three">Not updated</p>
</body>
</html>

JavaScript函数代码

function load(one, two, three) {
    console.log('Loadin new page with data!');
    window.location.href = 'http://127.0.0.1:5500/newPageTemplate.html'; 
    // window.location.assign('http://127.0.0.1:5500/newPageTemplate.html');
    // window.location.replace('http://127.0.0.1:5500/newPageTemplate.html');
    const dataOne = document.getElementsByClassName('one')[0];
    const dataTwo = document.getElementsByClassName('two')[0];
    const dataThree = document.getElementsByClassName('three')[0];
    dataOne.innerText = one;
    dataTwo.innerText = two;
    dataThree.innerText = three;
}

问题根源 #

当前代码里，修改DOM的逻辑写在window.location.href跳转之后，但页面跳转后，原页面的JavaScript会立即停止执行，新页面的DOM还未加载完成，根本找不到目标元素，所以无法完成数据更新。

原生JavaScript实现方式 #

方式一：URL查询字符串传递参数 #

适合传递简单的文本数据，参数会显示在地址栏中：

1. 修改主页面的load函数，将参数编码后拼接到URL：

function load(one, two, three) {
  // 对参数编码，避免特殊字符导致的问题
  const encodedOne = encodeURIComponent(one);
  const encodedTwo = encodeURIComponent(two);
  const encodedThree = encodeURIComponent(three);
  const targetUrl = `newPageTemplate.html?one=${encodedOne}&two=${encodedTwo}&three=${encodedThree}`;
  window.location.href = targetUrl;
}

2. 在模板页面中，页面加载完成后解析URL参数并更新DOM：

// 可放在tester.js中，或模板页面的<script>标签内
document.addEventListener('DOMContentLoaded', function() {
  // 解析URL中的查询参数
  const params = new URLSearchParams(window.location.search);
  // 获取参数，没有则使用默认值
  const one = params.get('one') || 'Not updated';
  const two = params.get('two') || 'Not updated';
  const three = params.get('three') || 'Not updated';

  // 更新页面内容
  document.querySelector('.one').textContent = one;
  document.querySelector('.two').textContent = two;
  document.querySelector('.three').textContent = three;
});

方式二：sessionStorage传递数据 #

适合传递复杂数据（如对象、数组），数据仅存储在用户当前浏览器会话中，关闭浏览器后自动清除：

1. 修改主页面的load函数，将数据存入sessionStorage：

function load(one, two, three) {
  // 将数据转为JSON字符串存入sessionStorage
  const pageData = JSON.stringify({ one, two, three });
  sessionStorage.setItem('pageData', pageData);
  window.location.href = 'newPageTemplate.html';
}

2. 在模板页面中，读取sessionStorage数据并更新DOM：

document.addEventListener('DOMContentLoaded', function() {
  const storedData = sessionStorage.getItem('pageData');
  if (storedData) {
    const { one, two, three } = JSON.parse(storedData);
    document.querySelector('.one').textContent = one;
    document.querySelector('.two').textContent = two;
    document.querySelector('.three').textContent = three;
    // 用完删除数据，避免下次打开模板页面时残留旧数据
    sessionStorage.removeItem('pageData');
  }
});

• 完全无干扰：每个用户的浏览器都是独立的运行环境，URL参数仅存在于各自的地址栏，sessionStorage也是用户本地浏览器的存储，不同用户的数据完全隔离，不会互相影响。
• 服务器端仅会收到每个用户的独立页面请求，和普通页面访问逻辑一致，不会因为多用户同时点击产生冲突或性能问题。

内容的提问来源于stack exchange，提问作者Pro Girl