我正在使状态保存/恢复模块(https://github.com/naver/egjs-persist)来恢复Safari提供的BFCache之类的状态。但是,存在一个不必要地使用空间的问题。我已尝试解决此问题,但对此不满意。
我们已经创建了一个模块,用于在移至具有相同来源的页面历史中的上一页或下一页时记住上一状态。
此功能是基于多页的服务中非常需要的功能之一。即,当您按下“后退”按钮或“前进”按钮时,您想要还原以前的状态以提高可用性。例如,滚动位置是最具代表性的状态。此外,还可以恢复页面中显示的轮播的位置。在Safari浏览器中,BFCache提供了此功能。
在PC(Android浏览器)上,通过按“后退”按钮转到上一页时,“后退”按钮不会还原前一页,因此您可以使用此模块(内部使用会话存储)将状态保存为在页面上恢复后,当您返回页面时,它会调用保存的状态。
要解决此问题,需要一种删除不必要数据的方法。
要消除不必要的状态值,实现方法如下。
从目标中排除先前移动的页面以基于当前页面前进或后退时,则从会话存储中删除不必要页面的状态。例如,如果您从A页移动到B页,然后再次返回C页,则B页不可用于“后退”或“前进”。因此,应清除B页的状态信息。
实现的概念是将深度信息映射到每个页面移动路径。如果新移动的页面的深度小于或等于会话存储中的现有页面深度,则删除该深度以下的现有页面信息。
但是,我在解决问题时遇到了一些困难。
无法使用或更新历史记录状态信息
历史记录的最大长度为50,历史记录的长度是深度的基础(基于Chrome)。
所以我考虑了如何根据页面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。
在这种情况下,可以通过以下方式进行补偿,但这也不是完美的解决方案。
我目前正在处理上述问题,但我想问您更多建议。 我想在问题上添加一个注释到github存储库。
https://github.com/naver/egjs-persist/issues/33
谢谢。