如何将 URL 中的数据从一个 JS 发送到另一个

在开发 Web 应用时，我们经常需要将数据从一个页面传递到另一个页面。这可以通过 URL 参数来实现。本文将介绍如何使用 JavaScript 将数据从 URL 中发送到另一个页面。

通过 URL 参数传递数据

在 URL 上添加参数是一种简单的方式，可以将数据从一个页面传递到另一个页面。例如，我们可以将搜索关键词添加到 URL 中，以便在搜索结果页面上显示相应的内容。

要将数据发送到 URL 中，我们可以使用 window.location 对象。该对象表示当前文档的 URL，我们可以使用 search 属性来访问 URL 中的查询字符串。查询字符串是 URL 的一部分，包含 ? 字符后的所有内容。

const query = window.location.search;

通过上述代码可以获取当前文档的 URL 中的查询字符串。但是查询字符串包含了所有参数，我们需要将它解析为一个对象，以方便获取参数的值。

下面是一个实用函数，用于将查询字符串解析为对象：

function parseQuery(query) {
  const params = {};
  const paramList = query.substr(1).split("&");
  for (let i = 0, len = paramList.length; i < len; i++) {
    const param = paramList[i].split("=");
    const key = decodeURIComponent(param[0]);
    const value = decodeURIComponent(param[1]);
    params[key] = value;
  }
  return params;
}

该函数接受查询字符串作为参数，并返回一个对象，其中包含所有解析的参数。例如，如果查询字符串为 ?a=1&b=2&c=3，则返回的对象为 { a: "1", b: "2", c: "3" }。

现在我们已经得到了 URL 参数，我们可以将它们保存到变量中，并在另一个页面上使用这些数据。

跨页面传递数据

有两种方法可以在不同的页面之间传递数据：使用 cookie 或使用 Web 存储。我们将分别介绍这两种方法。

使用 cookie

使用 cookie 是一种传统的方法，可以在客户端存储小量数据。将数据存储在 cookie 中，可以在同一域名下的所有页面之间共享。但是，cookie 通常具有大小限制（Chrome 和 Firefox 等浏览器的默认大小为 4 KB），因此不能存储大型数据。

要在 JavaScript 中创建 cookie，可以使用以下代码：

document.cookie = "key=value;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/";

其中 key 是 cookie 的名称，value 是 cookie 的值。设置 expires 属性可以指定 cookie 的过期时间。如果未设置此属性，则 cookie 将在用户关闭浏览器时过期。path 属性指定可以访问 cookie 的 URL 路径。

要从 cookie 中读取数据，可以使用以下代码：

const cookies = document.cookie.split(';');
const data = {};
cookies.forEach(cookie => {
  const [key, value] = cookie.split('=');
  data[key.trim()] = value.trim();
});

这段代码将读取所有 cookie，将它们解析为一个对象，并将它们保存在名为data的变量中。我们可以通过关键字访问特定的 cookie。

使用 Web 存储

使用 Web 存储（LocalStorage 和 SessionStorage）是一种更现代的方法，可以在客户端存储大量数据。Web 存储 API 提供了两个存储机制：

• LocalStorage：在浏览器关闭后仍然可用。
• SessionStorage：在浏览器关闭后不可用。

Web 存储 API 可以在全局 localStorage 和 sessionStorage 对象上使用。例如，要在 localStorage 中存储数据，可以使用以下代码：

localStorage.setItem("key", "value");

要从 localStorage 中读取值，可以使用以下代码：

const data = localStorage.getItem("key");

我们可以使用相同的方法在 SessionStorage 中存储和读取数据。只需将 localStorage 替换为 sessionStorage 即可。

总结

本文介绍了如何使用 JavaScript 将数据从 URL 中发送到另一个页面。我们可以将数据存储在 cookie 或 Web 存储中，以便在不同的页面之间共享。虽然这两种方法都有优点和缺点，但它们是将数据从一个页面传递到另一个页面的最简单和最常见的方法之一。