如何使用Javascript设置查询字符串

Question

有没有一种使用JavaScript设置查询字符串值的方法？

我的页面有一个筛选列表，当点击时，它会改变右侧的页面结果窗格。

我正在尝试更新url的查询字符串值，以便如果用户离开页面，然后点击“返回”按钮，他们将返回到上次过滤器选择集。

例如：
落地页：foo.html
点击1：foo.html?facets=bar
点击2：foo.html?facets=bar|baz
点击3：foo.html?facets=bar|baz|zap

这可行吗？

- rsturim

---

也许可以通过使用筛选器值 cookie 来更好地实现？ - Dan

你可以看一下Backbone，特别是它的Backbone.Router类。 - acme

Answer 1

你可以使用URLSearchParams。请注意，它不适用于Internet Explorer 11。

// Get current URL parts
const path = window.location.pathname;
const params = new URLSearchParams(window.location.search);
const hash = window.location.hash;

// Update query string values
params.set('numerical', 123);
params.set('string', 'yummy');
params.set('multiple', ['a', 'b', 'c']);
params.set('foreignChar', 'é');

// Encode URL
// numerical=123&string=yummy&multiple=a%2Cb%2Cc&foreignChar=%C3%A9
console.log(params.toString());

// Update URL
window.history.replaceState({}, '', `${path}?${params.toString()}${hash}`);

- Dryden Williams

---

这很棒，但你应该在 params.toString 之后也包括 location.hash。 - Kyle Barron

Answer 2

这是可能的，但会刷新页面。

document.location = "?facets=bar";

如果您不关心浏览器支持，可以使用HTML5的history.pushState。

- Peter Olson

---

顺便提一句，现在已经是2016年了，几乎所有的浏览器都支持history.pushState。 - Garrett

如果您不想创建新的历史记录条目，请使用history.replaceState而不是history.pushState。（更多信息请参见此处。） - Garrett

Answer 3

你可以使用Javascript来更改URL的哈希部分（即#后面的内容），但是更改查询字符串意味着你必须重新加载页面。所以，不，你想要的那种方式是不可能的。

另一种选择是使用Javascript来更改哈希，然后在页面加载时检查哈希以动态更改结果。你正在寻找类似于jQuery Address的东西。

- Kelly

---

如@Dryden Williams的回答所示，可以使用window.history.replaceState()或window.history.pushState()在不重新加载页面的情况下更改URL。当最初提出这个问题时，这种方法并没有得到完全支持，但现在所有主要浏览器都可以实现。 - dave