jQuery 将标签附加到 URL 而不刷新

Question

我正在尝试创建一个 "builder" 页面，用户可以在其中 select 从下拉列表中选择一个元素，然后构建一个网页。我们无法访问此信息的数据库，因此我希望能够将元素保存在 URL 中，以便 URL 可以通过电子邮件发送或保存在电子表格和脚本中"write" 每次有人访问该页面时（这仅用于模型和交付目的 - 不用于生产）。

我尝试使用哈希 (#)，但是当我这样做时，出现错误：Uncaught Error: Syntax error, unrecognized expression: #h=3&f=2

我使用等号来确定我正在寻找的对象的哪个变体，这就是为什么这会产生问题。

当我切换到使用 window.location.search 并使用地址栏中的问号 (?) 时，它工作正常，但我不知道如何更改 URL （与jquery/javascript) 而不是以这种方式刷新页面。

我希望 url 类似于 www.sample.com/?h=1&f=2 或 www.sample.com/#h=1&f=2。然后，在 "building" 过程中，我希望能够将所有不同的元素及其变体附加到 URL 中，像 window.location.hash = window.location.hash + "a=1"; 或 window.location.hash = window.location.search + "a=1";

有什么想法吗？

Answer 1

这种方式应该可行。

var defaultState = {
   current: window.location.pathname
};

var requestParameters = [
   '?id=0',
   '&id=1',
   '&id=2' 
];

var path = window.location.pathname + requestParameters.join("");
window.history.pushState(defaultState, 'Title', path);

结果：http://example.com/?id=0&id=1&id=2

jQuery 将标签附加到 URL 而不刷新

jQuery append tags to a URL without refreshing

jquery

html

fragment-identifier