通过后的数据与window.location.href-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要获取URL上的参数或者修改URL。window.location.href是一个非常有用的API，它可以帮助我们获取当前页面的URL，并且可以通过修改它来实现页面跳转。

但是，在一些特殊情况下，你可能需要将一些数据通过URL传递给下一个页面，而这些数据又是从后端通过接口获取到的。这时候，你就需要了解如何将这些数据添加到URL中，并在下一个页面中获取它们。本文将详细介绍如何通过后的数据与window.location.href实现这一功能。

将数据添加到URL

首先，我们需要将数据添加到URL中。通常，我们可以使用查询字符串（query string）的形式将数据添加到URL中。查询字符串是指URL中问号（?）后面的部分，它由多个键值对组成，每个键值对之间使用&符号连接。

假设我们从后端接口获取到了以下数据：

const data = {
  name: 'chatgpt',
  age: 3,
  gender: 'unknown'
};

我们可以将这些数据添加到URL中的查询字符串中。具体来说，我们需要将每个键值对都转换成字符串，并使用&符号连接起来。可以使用Object.entries()方法将对象转换为键值对数组，然后使用Array.map()方法将每个键值对转换为字符串。最后，使用Array.join()方法将所有字符串连接起来。

const queryString = Object.entries(data).map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`).join('&');

上述代码中，我们使用了encodeURIComponent()方法对每个键和值进行编码，这是因为URL中可能包含一些特殊字符（例如空格、#号等），需要进行URL编码才能正确传递。

现在，我们可以将查询字符串添加到当前页面的URL中。可以使用window.location.href属性获取当前页面的URL，并将查询字符串添加到其末尾，然后使用window.location.replace()方法跳转到新的页面。

const currentUrl = window.location.href;
const newUrl = `${currentUrl}?${queryString}`;
window.location.replace(newUrl);

在下一个页面中获取数据

在下一个页面中，我们需要从URL中获取之前添加的数据。可以使用window.location.search属性获取查询字符串部分，然后将其解析为对象。

const searchParams = new URLSearchParams(window.location.search);
const data = {};
for (const [key, value] of searchParams.entries()) {
  data[key] = decodeURIComponent(value);
}

上述代码中，我们使用了URLSearchParamsAPI将查询字符串解析为一个对象。然后，使用decodeURIComponent()方法对每个值进行解码，以便正确返回原始值。

现在，我们已经成功获取了之前添加到URL中的数据。你可以根据具体需求对数据进行处理或者展示。

指导意义

通过本文，我们学习了如何将后端返回的数据通过URL传递给下一个页面，并在下一个页面中获取这些数据。这在一些特殊场景下非常有用，例如在单页应用程序（SPA）中实现页面跳转时。

需要注意的是，URL的长度是有限制的。如果你需要在URL中传递大量数据，可能会导致URL过长，从而出现一些问题。因此，在实际开发中，你需要谨慎处理URL中的数据，确保其不会超过URL长度限制。

示例代码：https://codepen.io/chatgpt/pen/RwPQmXO

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/11176