Javascript 使用html5历史记录代替哈希URL来恢复用户的历史记录

我们有一个基于查询字符串加载结果的单页应用程序

查询字符串如下所示： 城市=德里，pn=1

SPA在同一网页上有不同的部分。当用户导航到这些部分时，我们使用散列更改来维护历史记录。例如： 城市=德里&pn=1#排序：显示SPA的排序参数部分。 ？城市=德里&pn=1#过滤器：显示SPA的过滤器部分

我们现在正计划放弃在url中使用哈希更改来维护历史，而是开始使用html5历史api

如何使用历史插件替换这些散列并执行相同的功能

我试着用+符号，例如（？city=德里&pn=1+sort）。但看起来用户无法将此设置为书签，因为api不处理+符号，所以页面将中断在ajax api请求中，符号作为空格

---

还有什么其他方法可以优雅地处理它呢？

对查询字符串上的数据进行编码的标准方法是添加另一个key=value对

?city=Delhi&pn=1&sort=true

---

注意，如果您使用的是historyapi，那么服务器端代码应该能够生成JavaScript将生成的相同视图

e、 g

用户到达

/

并获得服务器提供的主页

用户跟随一个链接到

/？city=德里&pn=1&sort=true

，Ajax将页面转换为另一个页面

用户书签链接

用户离开

用户又过了一天回到他们的书签，服务器（不是JavaScript）构建

/？city=德里&pn=1&sort=true

用户跟随另一个链接，JS开始工作

这意味着：

• 站点在初始加载时执行得更快。您不必加载主页，然后等待JS发出附加请求，将其转换为您最初要求的页面
• 它是搜索引擎的好食物
• 它继续发挥作用

---

在我们的场景中，我认为我们不需要从服务器端代码生成相同的视图。我想如果我忽略服务器端的这些附加参数就可以了。如果用户粘贴这样的url，结果被加载，而只使用原始查询字符串参数忽略它，我们就可以了。“在我们的场景中，我认为我们不需要从服务器端代码生成相同的视图。”-那么，使用历史API而不是hash bang是没有意义的。我们有理由这样做，因为这是一个包含多个不同过滤器的搜索页面，用户可以逐个应用这些过滤器，我们希望为浏览器返回提供功能，以便他可以通过浏览器返回逐个删除过滤器。我同意hashbang也可以做到这一点，但它将完全是手动的，而历史api将使我们更容易。如果错误，请更正。您可以使用hashchange事件。AFAIK为您提供了与history API一样多的功能。我已经为一个级别的过滤器应用了它，例如通过放置#过滤器，但是如何为所有过滤器的每个嵌套级别都这样做。每次我都必须附加过滤名称。