javascript - 浏览器历史记录管理

Question

我试图找到一个干净的解决方案，以最有效的方式使用浏览器历史记录。（我正在使用GWT，但这个问题实际上比那个问题更普遍。）
我的情况是这样的（我认为这很正常）：
我有一个web应用程序，它有几个不同的页面/位置/位置（无论您想怎么称呼它），我会根据浏览器历史记录的更改显示这些页面/位置。除了通常的“主页”、“功能”、“联系人”等大多是静态HTML页面之外，还有一个“用户”部分，用户可以登录到他们的用户帐户，还有（我们称之为“项目”部分，用户可以在其中处理他们的项目。
所以，现在我只需要使用名为“主页”、“功能”、“联系人”等的本地链接，以及“用户”、“项目”来访问不同的页面。一切都很好，除了以下情况：
例如，如果有人打开链接项目，则会显示一个项目登录对话框。这个登录对话框有一个cancel按钮，我只想通过从我的应用程序调用浏览器的back按钮来实现（非常简单）。我想这么做的原因有两个：
您可以从应用程序中的几个不同位置以及书签访问此登录对话框，使用此方法，我不需要跟踪用户的来源。
更重要的是：如果我确实记得用户来自何方（例如家）并将用户“转发”链接到返回该位置，我将获得以下效果：
假设用户访问主页，然后访问功能，然后单击项目登录。
如果用户单击“取消”按钮，然后我将其“转发”到“功能”，则单击浏览器的“后退”按钮后将返回登录对话框，然后再次单击“功能”，最后返回“主页”。不是你所期望的那样。
相反，如果我只是通过浏览器的back函数实现cancel，那么您会希望立即返回到Home。
在这一点上，一切都很好，除了用户最初通过一个指向#项目的直接书签链接进入这个登录对话框。因为这样，如果我简单地将cancel=back设置为back，那么用户将从页面完全返回到浏览器的起始页或以前的任何位置。所以，在这种情况下，我需要将“forward”链接到“Home”。
现在，我试着想出了几种方法来解决这个问题，并提出了一些解决方案，但对我来说，似乎没有一个是非常可取的，但让我分享一下，也许可以激发一些创造力：
当页面第一次打开时，获取历史标记。如果是#Project或#User或其他任何触发可取消对话框的项，请将以下项放入历史堆栈：#Home，#Project，其中最后一项是保存的初始令牌。这样，我的取消按钮就可以正常工作了。。。一次。。。但是，如果用户随后单击后退，他将再次获得登录对话框（因为原始历史标记仍在历史堆栈中，我不知道如何清除它）。单击“取消”将使他离开页面（不一致的行为）。
相反，我可以将Project放在堆栈上，这样我就可以捕捉到一个back-click，它可以检测到这个链接并简单地将Home标记重新添加到堆栈上，从而让用户离开页面。这将解决问题，总体上工作得很好，除了我讨厌网站，不让你退出他们没有锤回按钮足够快。。。
最干净的解决方案是，如果我能以某种方式跟踪历史堆栈的长度，就我的应用程序中的位置而言。一开始就很简单：上面有一个项目。但如果我得到一系列这样的地方：家，特色，家呢？用户是否单击“上一步”返回“主页”，即历史记录现在在浏览器中的长度为1，或者单击“主页”链接，即历史记录的长度为3？我的想法是：
定义一下，家和家是一样的。
使页面链接中的所有链接仅指向链接的大写版本。
每当您收到以
大写字母，立即在历史记录中添加两项，
第一个以小写字母开头，第二个也以大写字母开头。也就是说，家变成了家。
如果你得到一个以小写字母开头的历史记录更改，你知道用户只是点击了后退而不是链接，你只需再点击两次后退，他就可以真正回到上一页。
现在您可以区分“向后”和“向前”链接，并在代码中维护准确的历史模型。
但是，不幸的是，这有两个问题：第一，浏览器的历史记录中充斥着垃圾（不是很优雅），第二，系统开始崩溃，如果用户点击足够快，以至于你的应用没有时间对消息做出反应。
看起来这应该是一个非常普遍的问题，我希望你们中的一个能给我指出一个比我目前的想法更有用的方向。

Answer 1

window.history有一个length属性，它将显示当前选项卡的历史记录中有多少个条目。不幸的是，它是不可过滤的（所以没有办法说window.history.localURLs.length）。
如果您几乎完全是在客户端（即部分更新、很少的完整页面加载、使用散列或history.(push|pop)StateAPI）执行此操作，那么您可能需要考虑将客户端路由框架合并到应用程序中，以避免重新发明控制盘。