在前端开发中，我们经常需要获取URL上的参数或者修改URL。window.location.href是一个非常有用的API，它可以帮助我们获取当前页面的URL，并且可以通过修改它来实现页面跳转。
但是，在一些特殊情况下，你可能需要将一些数据通过URL传递给下一个页面，而这些数据又是从后端通过接口获取到的。这时候，你就需要了解如何将这些数据添加到URL中，并在下一个页面中获取它们。本文将详细介绍如何通过后的数据与window.location.href实现这一功能。
将数据添加到URL
首先，我们需要将数据添加到URL中。通常，我们可以使用查询字符串（query string）的形式将数据添加到URL中。查询字符串是指URL中问号（?）后面的部分，它由多个键值对组成，每个键值对之间使用&符号连接。
假设我们从后端接口获取到了以下数据：
----- ---- - - ----- ---------- ---- -- ------- --------- --
我们可以将这些数据添加到URL中的查询字符串中。具体来说，我们需要将每个键值对都转换成字符串，并使用&符号连接起来。可以使用Object.entries()方法将对象转换为键值对数组，然后使用Array.map()方法将每个键值对转换为字符串。最后，使用Array.join()方法将所有字符串连接起来。
----- ----------- - ------------------------------- ------- -- ---------------------------------------------------------------------
上述代码中，我们使用了encodeURIComponent()方法对每个键和值进行编码，这是因为URL中可能包含一些特殊字符（例如空格、#号等），需要进行URL编码才能正确传递。
现在，我们可以将查询字符串添加到当前页面的URL中。可以使用window.location.href属性获取当前页面的URL，并将查询字符串添加到其末尾，然后使用window.location.replace()方法跳转到新的页面。
----- ---------- - --------------------- ----- ------ - ------------------------------- --------------------------------
在下一个页面中获取数据
在下一个页面中，我们需要从URL中获取之前添加的数据。可以使用window.location.search属性获取查询字符串部分，然后将其解析为对象。
----- ------------ - --- ---------------------------------------- ----- ---- - --- --- ------ ----- ------ -- ----------------------- - --------- - -------------------------- -
上述代码中，我们使用了URLSearchParamsAPI将查询字符串解析为一个对象。然后，使用decodeURIComponent()方法对每个值进行解码，以便正确返回原始值。
现在，我们已经成功获取了之前添加到URL中的数据。你可以根据具体需求对数据进行处理或者展示。
指导意义
通过本文，我们学习了如何将后端返回的数据通过URL传递给下一个页面，并在下一个页面中获取这些数据。这在一些特殊场景下非常有用，例如在单页应用程序（SPA）中实现页面跳转时。
需要注意的是，URL的长度是有限制的。如果你需要在URL中传递大量数据，可能会导致URL过长，从而出现一些问题。因此，在实际开发中，你需要谨慎处理URL中的数据，确保其不会超过URL长度限制。
示例代码：https://codepen.io/chatgpt/pen/RwPQmXO
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/11176