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

Question

我们有一个单页面应用程序，可根据查询字符串加载结果。

查询字符串如下所示： ？城市=德里＆安培; PN = 1

SPA在同一网页上有不同的部分。当用户导航到这些部分时，我们使用哈希更改来维护历史记录。例如： ？city = Delhi＆amp; pn = 1＃sort：显示SPA的排序参数部分。 ？city = Delhi＆amp; pn = 1＃filters：显示SPA的过滤部分。

我们现在计划使用网址中的哈希更改来删除维护历史记录，而是开始使用html5历史记录api。

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

我尝试了一个+号，例如（？city = Delhi＆amp; pn = 1 + sort）。但看起来用户不能将此书签，并且页面会因为api不处理+符号而中断。 +符号在ajax api请求中被视为空格。

优雅地处理它的其他可能性是什么？

Answer 1

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

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

请注意，如果您使用的是历史记录API，那么您应该拥有能够生成与JavaScript相同的视图的服务器端代码。

e.g。

1. 用户到达/并获取服务器提供的主页
2. 用户点击/?city=Delhi&pn=1&sort=true链接，Ajax将页面转换为另一页。
3. 用户书签链接
4. 用户离开
5. 用户再次回到他们的书签，服务器（不是JavaScript）构建/?city=Delhi&pn=1&sort=true
6. 用户关注另一个链接，JS开始

这意味着：

• 网站在初始加载时执行速度更快。您不必加载主页，然后等待JS发出其他请求，将其转换为您最初要求的页面。
• 这是搜索引擎的好食物
• 继续工作when JS fails。