如何在 JavaScript 中将数据从一个页面传递到另一个页面

在 Web 开发中，我们经常需要在不同的页面间传递数据。本文将介绍多种方法，帮助你在 JavaScript 中轻松地实现此功能。

1. 使用 URL 参数传递数据

在 URL 中传递数据是一种非常简单的方法。例如，你可以像下面这样在页面 A 中通过链接跳转到页面 B，并在 URL 上带上参数：

<!-- Page A -->
<a href="pageB.html?name=Bob&age=30">Go to page B</a>

在页面 B 中，你可以从 URL 上获取参数，并使用它们：

// Page B
const queryParams = new URLSearchParams(window.location.search);
const name = queryParams.get('name'); // "Bob"
const age = queryParams.get('age'); // "30"

这种方法简单易用，但适用于传递少量数据。如果需要传递大量数据，则需要使用其他方法来传递数据。

2. 使用 Local Storage 传递数据

Local Storage 是一个 HTML5 API，可以将数据存储在客户端本地的浏览器中。本地存储的数据会一直存储在浏览器中，除非用户主动删除。因此，我们可以使用 Local Storage 在不同的页面间传递数据。

例如，在页面 A 中设置 Local Storage：

// Page A
localStorage.setItem('name', 'Bob');
localStorage.setItem('age', '30');

在页面 B 中获取 Local Storage：

// Page B
const name = localStorage.getItem('name'); // "Bob"
const age = localStorage.getItem('age'); // "30"

需要注意的是，Local Storage 中存储的数据会一直存在，如果不进行删除或清空，数据会一直占用客户端的存储空间。

3. 使用 Session Storage 传递数据

Session Storage 与 Local Storage 类似，但是存储的数据只在客户端会话期间有效。如果用户关闭了浏览器窗口，数据将被删除。因此，我们可以在同一浏览器窗口的不同页面间传递数据。

例如，在页面 A 中设置 Session Storage：

// Page A
sessionStorage.setItem('name', 'Bob');
sessionStorage.setItem('age', '30');

在页面 B 中获取 Session Storage：

// Page B
const name = sessionStorage.getItem('name'); // "Bob"
const age = sessionStorage.getItem('age'); // "30"

需要注意的是，Session Storage 中存储的数据仅在相同的客户端会话期间有效。

4. 使用 Cookies 传递数据

Cookies 是一种存储在客户端计算机上的小文本文件。我们可以使用 Cookies 在不同的页面间传递数据。

例如，在页面 A 中设置 Cookies：

// Page A
document.cookie = 'name=Bob';
document.cookie = 'age=30';

在页面 B 中获取 Cookies：

// Page B
const cookies = document.cookie;
const name = cookies.split('; ')[0].split('=')[1]; // "Bob"
const age = cookies.split('; ')[1].split('=')[1]; // "30"

需要注意的是，Cookies 中存储的数据大小有限制。默认情况下，一个 Cookie 的大小不能超过 4KB。此外，Cookies 中存储的数据会被发送到服务器，因此可能会影响网站的性能。

总结

以上介绍了 Web 开发中常见的几种方法来实现在 JavaScript 中将数据从一个页面传递到另一个页面的功能。需要根据具体的需求选择合适的方法，同时需要注意数据的大小和安全性。