这是一篇基础文章讲述一些浏覽器怎么查看历史记录里面历史记录栈管理的相关内容。写这个的起因源于我最近想研究pushState,看看用它来实现SPA会遇到哪些问题而pushState最终影響的就是浏览器怎么查看历史记录历史记录栈里面的内容,所以就花了点时间琢磨了一下浏览器怎么查看历史记录是如何管理历史记录栈嘚因为在研究的过程中,发现了一些曾经不曾注意到一些要点所以就记录下来了。
这个demo用于进行本文后面内容涉及到的相关测试假洳你也感兴趣的话,建议每次要测试一个新的问题时都在新选项卡里面打开这个demo,而不是从一个已经打开过网页的选项卡里面打开;因為已经打开过网页的选项卡它的历史记录栈里面已经包含了之前访问的网页记录,所以会对你要测试的问题结果产生影响
浏览器怎么查看历史记录会对同一个窗口(选项卡)中访问的网页进行记录,不管我们是通过以下哪种方式改变网页浏览器怎么查看历史记录都会紦改变后的网页记录下来,以便通过浏览器怎么查看历史记录的前进和后退按钮能够快速的切换到已经访问过的网页:
1)直接在地址栏輸入网页地址;
2)通过网页内的超链接点击,跳转到其它网页;但是不能是在新窗口中打开的链接;
4)通过表单提交跳转到其它网页;但昰不能是提交到新窗口的表单
总之,只要是在同一个窗口内网页发生了跳转,浏览器怎么查看历史记录都会记录不过刷新除外,history对潒的length属性可以查看当前窗口存储的历史记录总数在前面的demo页面中,我把这个属性打印在页面上只有网页改变的时候,这个属性才会变囮;而刷新网页不会改变这个属性
浏览器怎么查看历史记录有一个数据结构来存储网页的历史记录,我把它称之为历史记录栈因为它嘚结构跟栈的使用方式有些相似。
操作测试一:假如你复制前面的demo地址然后在chrome浏览器怎么查看历史记录下按以下步骤进行操作:
浏览器怎么查看历史记录会以下图类似的方式来存储以上的访问记录:
由于现在的浏览器怎么查看历史记录都是多选项卡的模式,当你打开一个選项卡的时候即使没有访问具体网页,浏览器怎么查看历史记录也为这个选项卡创建好了BOM对象比如history对象,然后把新选项卡的空白页作為历史记录里面的第一条记录所以在上图中的最后一列可以看到8条记录,跟demo页面里显示的数字一样:
跟历史记录栈一起的浏览器怎么查看历史记录还有一个访问指针来表示当前网页在历史记录栈中的位置。默认情况下当我们通过前面列举的方式改变网页地址的时候,嘟会把新的页面压入到历史记录栈的顶部同时把指针指向到这个最新的网页,就如上面的图中所示每次改变了页面,当前页面的指针始终指向的是历史记录栈最顶部的那条记录;当我们通过浏览器怎么查看历史记录的前进后退功能(包括按钮快捷,右键菜单等方式)戓者是history提供的go/back/forward方法都不会改变历史记录栈的内容,只会移动一下这个指针:
1)前进功能/go(1)/forward只是让这个指针上移1个位置;
2)后退功能/go(-1)/forward,只昰让这个指针下移1个位置;
3)go(n)让指针上移n个位置;go(-n)让指针下移n个位置
浏览器怎么查看历史记录根据移动后的指针位置,找到历史记录栈Φ的网页进行显示假如接着操作测试一的结果,继续做以下操作
操作测试二:点击7次浏览器怎么查看历史记录后退按钮。
浏览器怎么查看历史记录此时历史记录栈的存储情况就变成下面这个状态了:
虽然history.go(n)和history.go(-n)可以将指针移动到任意位置但是当要移动到的位置超出了历史記录栈的位置范围时,指针就不会移动所以在操作测试二的结果中,调用history.go(-100)和history.go(100)都是不会起作用的
还有两种情况会改变历史记录栈的内容。
操作测试三:假如我们接着操作测试二的结果点击三次前进按钮,让浏览器怎么查看历史记录的历史记录栈进入到下面这个状态:
此時由于操作测试二和操作测试三都没有改变历史记录栈的内容所以正确的话,页面上的历史记录统计应该还是8:
操作测试四:接着我們做以下两步操作:点击demo2.html,点击demo3.html这个时候页面上的历史记录统计变成了:
history.length已经改变了,说明历史记录栈的内容也变化了只不过为什么變成6,而不是10(8+2)呢看看此时浏览器怎么查看历史记录历史记录栈的状态:
浏览器怎么查看历史记录在往历史记录栈里面压入新的记录時,是直接在当前指针后面压入的如果当前指针的后面,还有其它的记录项都会被丢弃掉。这样就好理解为啥操作测试四之后的历史記录总数只有6个了
浏览器怎么查看历史记录对历史记录的管理还有一个要点就是对历史记录栈的存储总数有限制,chrome和firefox都是50当历史记录棧的存储的量超出这个限制后,历史记录的存储就会采取滚动的方式存储也就是新的记录会压入到栈的顶部,最底部的记录会从栈的底蔀移除出去通过在demo页面里,不断地切换点击demo1,demo2,demo3,demo4当达到一定次数的时候,页面打印的统计信息不再变化就表示达到历史记录达到限制了。不过IE11我点到100多,发现它还在变化说明IE的限制可能更高,也可能没有。
本文记录了一些浏览器怎么查看历史记录关于历史记录管理嘚内容可能有分析不到位的地方,欢迎大家的批评与指正以上内容希望对有需要的朋友加深对history以及pushState的理解有所帮助,谢谢阅读:)
网頁锚点的变化也会导致历史记录栈的更新,特性与前文描述相同
如果您觉得本文对你有用,不妨帮忙点个赞或者在评论里给我一句贊美,小小成就都是今后继续为大家编写优质文章的动力流云拜谢! 欢迎您持续关注我的博客:)
版权所有,欢迎保留原文链接进行转载:)