如何在 JavaScript 中使用其他页面数据到新页面

在 web 应用程序中，我们有时需要在一个页面中使用其他页面的数据。在这个问题中，我们将重点介绍如何在 JavaScript 中获取其他页面的数据并将其传递到新页面。

方法一：使用 URL 参数

使用 URL 查询字符串是一种将数据从一个页面传递到另一个页面的简单方法。

在源页面中，将数据作为 URL 查询字符串参数传递。例如：

const data = { name: 'John', age: 30 };
const query = '?' + Object.keys(data).map(key => key + '=' + data[key]).join('&');
window.location.href = 'new-page.html' + query;

在目标页面中，获取查询字符串参数，并将其解析为对象：

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const data = {};
for (const [key, value] of urlParams.entries()) {
  data[key] = value;
}
console.log(data); // { name: 'John', age: '30' }

方法二：使用 localStorage

另一种更持久的方法是使用 localStorage 存储数据，并在新页面中检索数据。

在原始页面中，将数据存储在 localStorage 中：

const data = { name: 'John', age: 30 };
localStorage.setItem('data', JSON.stringify(data));
window.location.href = 'new-page.html';

在目标页面中，检索数据：

const dataString = localStorage.getItem('data');
const data = JSON.parse(dataString);
console.log(data); // { name: 'John', age: 30 }

方法三：使用 sessionStorage

与 localStorage 类似，sessionStorage 可以将数据在不同的页面之间传递。

在源页面中，将数据存储在 sessionStorage 中：

const data = { name: 'John', age: 30 };
sessionStorage.setItem('data', JSON.stringify(data));
window.location.href = 'new-page.html';

在目标页面中，检索数据：

const dataString = sessionStorage.getItem('data');
const data = JSON.parse(dataString);
console.log(data); // { name: 'John', age: 30 }

总之，在 JavaScript 中传递数据到新页面有很多方法，其中最常见的是使用 URL 参数、localStorage 或 sessionStorage。它们都有自己的优点和局限性，你需要根据你的需求选择适合你的方法。