如何在两个 HTML 页面之间交换变量？

在两个HTML页面之间交换变量，通常有以下几种方法：

1. 使用URL参数

通过在URL中添加查询参数，可以在页面之间传递变量。例如，从页面A导航到页面B时，可以将变量添加到URL中：

页面A的URL: http://example.com/pageA.html

当你从页面A跳转到页面B时，可以将变量通过URL传递：

html
<a href="http://example.com/pageB.html?variable=value">Go to Page B</a>

在页面B中，可以使用JavaScript来读取这个变量：

javascript
const urlParams = new URLSearchParams(window.location.search);
const myVariable = urlParams.get('variable');
console.log(myVariable); // 输出 "value"

2. 使用LocalStorage或SessionStorage

localStorage 和 sessionStorage 提供了在不同页面之间共享数据的能力。localStorage 存储的数据没有过期时间，而sessionStorage 的数据在页面会话结束时消失（比如关闭浏览器标签）。

设置变量（在页面A中）:

javascript
localStorage.setItem('myVariable', 'value');

获取变量（在页面B中）:

javascript
const myVariable = localStorage.getItem('myVariable');
console.log(myVariable); // 输出 "value"

3. 使用Cookies

Cookies也可以用来在不同的页面间共享数据。设置cookie通常通过JavaScript进行：

设置Cookie（在页面A中）:

javascript
document.cookie = "myVariable=value; path=/; expires=Fri, 31 Dec 9999 23:59:59 GMT";

获取Cookie（在页面B中）:

javascript
const getCookie = name => {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
};

console.log(getCookie('myVariable')); // 输出 "value"

4. 使用服务器端技术

在某些情况下，可以将变量存储在服务器上。当用户从一个页面跳转到另一个页面时，服务器可以将存储的变量插入到页面中。

示例：

在服务器端（例如使用Node.js和Express），可以在用户请求页面时将变量传递到视图。

javascript
app.get('/pageB', (req, res) => {
    const variableFromPageA = req.session.myVariable || 'defaultValue';
    res.render('pageB', { myVariable: variableFromPageA });
});

这里使用了session来存储变量，这需要使用适当的中间件如express-session。

总结

以上几种方法各有优缺点，选用哪种方法取决于具体的应用场景和需求。URL参数适合简单的数据传递且不涉及隐私信息；LocalStorage适合较大数据量的存储且不需要服务器参与；Cookies适合持久化的轻量级数据存储；服务器端技术适合需要高安全性和复杂状态管理的场景。