如何使用 Javascript 将查询参数附加到我的 URL？

我正在构建一个 Web 应用程序，并使用 Firebase 将用户数据存储在 Cloud Firestore 中。我的网络应用程序上有一个页面，允许用户从 Cloud Firestore 查看他们的文档。我想在我的 URL 末尾添加一个查询参数view.html所以我可以获取该查询参数值并使用它来搜索文档。

我一直在网上搜索寻找可能的解决方案。到目前为止，我已经看过一些有关该主题的视频，但它们并未深入到我所需要的深度。例如，这个视频 https://www.youtube.com/watch?v=-D5YGTkTBH4显示如何从 URL 添加和获取查询参数，但仅显示如何在控制台中记录这些更改。我如何将其设为我的网址？

我也在 Stackoverflow 上浏览寻找解决方案。这个 Stackoverflow 帖子 https://stackoverflow.com/questions/486896/adding-a-parameter-to-the-url-with-javascript问了一个类似的问题，但是，答案中的许多解决方案都会导致view.html循环重新加载。为什么会这样，如果这是一个可能的解决方案，我将如何阻止这种情况发生。

我将如何在 Javascript 中附加和获取 URL 查询参数？

你说你想在 javascript 中执行此操作，所以我假设页面本身正在构建/修改指向页面上任一位置或直接通过 javascript 访问的链接。

在浏览器的 javascript 中，有URL https://developer.mozilla.org/docs/Web/API/URL对象，可以构建和分解 URL

let thisPage = new URL(window.location.href);
let thatPage = new URL("https://that.example.com/path/page");

无论如何，一旦有了 URL 对象，您就可以访问它的各个部分来读取和设置值。

添加查询参数使用搜索参数 https://developer.mozilla.org/docs/Web/API/URL/searchParamsURL 的属性，您可以在其中添加参数.append https://developer.mozilla.org/docs/Web/API/URLSearchParams/append方法 - 并且您不必担心管理? and &...该方法会为您解决这个问题。

thisPage.searchParams.append('yourKey', 'someValue');

这在此页面上进行了实时演示，添加搜索参数并在每一步显示 URL：

let here = new URL(window.location.href);
console.log(here);
here.searchParams.append('firstKey', 'theValue');
console.log(here);
here.searchParams.append('key2', 'another');
console.log(here);