如何计算页面导航路径中当前页面的索引? (浏览器)

时间:2019-01-23 10:28:12

标签: javascript browser browser-history html5-history

我正在使状态保存/恢复模块(https://github.com/naver/egjs-persist)来恢复Safari提供的BFCache之类的状态。但是,存在一个不必要地使用空间的问题。我已尝试解决此问题,但对此不满意。

当前模块的概述和问题

我们已经创建了一个模块,用于在移至具有相同来源的页面历史中的上一页或下一页时记住上一状态。

此功能是基于多页的服务中非常需要的功能之一。即,当您按下“后退”按钮或“前进”按钮时,您想要还原以前的状态以提高可用性。例如,滚动位置是最具代表性的状态。此外,还可以恢复页面中显示的轮播的位置。在Safari浏览器中,BFCache提供了此功能。

在PC(Android浏览器)上,通过按“后退”按钮转到上一页时,“后退”按钮不会还原前一页,因此您可以使用此模块(内部使用会话存储)将状态保存为在页面上恢复后,当您返回页面时,它会调用保存的状态。

原样

  • 但是,当前的实现是一个大问题。。当您浏览页面时,所存储的状态值不会被删除,并且会继续累积。由于存储空间有限(2MB〜10MB),因此存在超出存储空间的问题。

Image link: AS IS

成为

  • 移动页面时,应根据当前页面删除不必要的存储信息。

Image link: TO BE

解决问题的难度

要解决此问题,需要一种删除不必要数据的方法。

要消除不必要的状态值,实现方法如下。

从目标中排除先前移动的页面以基于当前页面前进或后退时,则从会话存储中删除不必要页面的状态。例如,如果您从A页移动到B页,然后再次返回C页,则B页不可用于“后退”或“前进”。因此,应清除B页的状态信息。

实现的概念是将深度信息映射到每个页面移动路径。如果新移动的页面的深度小于或等于会话存储中的现有页面深度,则删除该深度以下的现有页面信息。

但是,我在解决问题时遇到了一些困难。

  1. 没有浏览器API可以知道深度信息
  2. 无法使用或更新历史记录状态信息

  3. 历史记录的最大长度为50,历史记录的长度是深度的基础(基于Chrome)。

  4. 无法区分导航是后退还是前进。(TYPE_BACK_FORWARD)
  5. 长按“后退/前进”按钮以及上一页导航,可以跳过几个步骤。

替代方案不完整

所以我考虑了如何根据页面URL计算虚拟深度。

也就是说,每次进入新页面时,我们都会增加深度。例如,如果按A-> B-> C的顺序移动,则可以分别随机分配1、2和3的深度。

但是,此替代方案也面临两个问题:

1. 1. A-> B-> C-> A(每个都移到新页面),状态值将被覆盖。

2. 2. A-> B-> C-> A-> D(每个都移到新页面)如果您通过长按鼠标左键来移动当前A(第一或第四)的深度,后退按钮。

  

History.state不能使用,因为它可以被覆盖。因此无法应用How to find the current location index in the browser history

在这种情况下,可以通过以下方式进行补偿,但这也不是完美的解决方案。

  1. 您可以通过为每个页面创建一个与URL组合的键来补充历史记录长度值,但是如果超过50,则会出现相同的问题。
  2. 即使页面的键与Referrer的URL组合在一起,也无法避免重复的可能性。

我目前正在处理上述问题,但我想问您更多建议。 我想在问题上添加一个注释到github存储库。

https://github.com/naver/egjs-persist/issues/33

谢谢。

0 个答案:

没有答案