如何将 HTML 页面的值传递给另一个页面

在网页开发中，常常需要将一个 HTML 页面的值传递到另一个页面，以实现数据的交互与共享。这不仅能提升用户体验，还能增强网站的功能性。以下为您详细介绍几种常见的方法。

使用 URL 参数传递值：这是最直观且简单的方式。在链接到另一个页面时，将需要传递的值附加在 URL 后面作为参数。例如，当前页面有一个用户 ID，想要传递到目标页面，可以这样写链接 <a href="targetPage.html?userId=123">跳转到目标页面</a>。在目标页面中，通过 JavaScript 的 window.location.search 属性获取 URL 参数，再解析出所需的值。这种方法的优点是简单易懂，适用于传递少量数据，并且可以在浏览器地址栏中直观地看到传递的值，方便调试。但缺点是参数会暴露在 URL 中，存在安全风险，不适用于传递敏感信息，同时传递的数据量也有限制。

使用表单提交传递值：当有较多数据需要传递，且希望用户能在当前页面输入数据后传递到另一个页面时，表单提交是很好的选择。在当前页面创建一个表单，用户输入数据后点击提交按钮，表单数据会被发送到指定的目标页面。目标页面通过服务器端脚本（如 PHP 的 $_POST 或 $_GET 变量）来接收并处理这些数据。这种方式相对安全，适合传递大量数据，不过需要在目标页面有对应的服务器端代码来处理表单数据。

使用本地存储或会话存储：HTML5 提供了本地存储（localStorage）和会话存储（sessionStorage）对象。可以在当前页面将数据存储到这两个对象中，例如 localStorage.setItem('username', 'John')。然后在另一个页面通过 localStorage.getItem('username') 来获取数据。本地存储的数据会一直存在，除非手动清除；会话存储的数据在浏览器会话结束时会被清除。这种方法适用于在不同页面间共享数据，且无需依赖服务器端处理，但要注意存储容量有限，并且存储的数据是字符串类型，对于复杂数据结构需要进行转换。