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

Using html5 history in place of hash urls to restore the history of the user

本文关键字：历史 记录 恢复 用户 URL html5 使用 哈希      更新时间：2023-09-26

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

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

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

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

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

例如，我尝试使用+号（？city=Delhi&pn=1+sort）。但看起来用户无法为此添加书签，并且页面会中断，因为 api 不处理 + 符号。+ 符号在 Ajax API 请求中被视为空格。

还有

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

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

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

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

例如

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

这意味着：

  • 站点在初始加载时执行速度更快。您不必加载主页，然后等待JS发出其他请求以将其转换为您最初要求的页面。
  • 这是搜索引擎的好食物
  • 当JS失败时，它继续工作。
相关文章：