历史记录API中hashchange与popstate的比较

2024年4月1日 285次阅读 来源: 囧囧

hashchange与popstate事宜都是浏览器历史纪录API，二者都是HTML5中的API，相对而言popstate比hashchange更加壮大。注重这两种历史纪录治理都受同源战略的限定，这里厘清下二者的区分以及相干运用：

hashchange

hashchange事宜是在浏览器URL中hash发作变化后触发的事宜(事宜触发后会在浏览器历史纪录中增添一条纪录)，URL中＃后的内容就是hash，它的变化所触发的hashchange事宜与ajax搭配最多。 按我的明白， 由于hash变化并不会向服务器发作要求，所以假如没有hashchange事宜，当我们点击浏览器行进和退却按钮时，服务器没法作出反应（由于服务器没法收到要求）， 有了这个事宜，就可以够运用js触发ajax的新要求让服务器作出相应。hashchange事宜自身只是监测hash的变化，我以为现在其主要意义就是与ajax搭配运用从而使得在ajax下历史纪录行进退却按钮依旧有用。能够运用以下简朴的代码体会下：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>hashchange</title>
</head>
<body onhashchange="alert('Got a hashchange.');">
    <a href='#foo'>Click me foo</a>
        <a href='#bar'>Click me bar</a>
</body>
</html>

hashchange的文档mark? hashchange

popstate

popstate事宜平常与pushState()和replaceState()这两个要领搭配运用， 当用户点击浏览器的行进退却按钮时， 支撑该事宜的浏览器就会触发popState事宜，望文生义，该事宜所pop的恰是由pushState()要领所保留的状况栈，这里简朴替下pushState()要领的语法,援用自MDN文档（注重该文档中特地指出了firefox对该要领完成的差别， 比如对title的疏忽）?支配浏览器的历史纪录：

pushState(object,title,url)

  • 状况对象（state object） — 一个JavaScript对象，与用pushState()要领建立的新历史纪录条目关联。不管什么时候用户导航到新建立的状况，popstate事宜都会被触发，而且事宜对象的state属性都包括历史纪录条目的状况对象的拷贝。
    任何可序列化的对象都能够被当作状况对象。由于FireFox浏览器会把状况对象保留到用户的硬盘，如许它们就可以在用户重启浏览器今后被复原，我们强行限定状况对象的大小为640k。假如你向pushState()要领传递了一个凌驾该限额的状况对象，该要领会抛出非常。假如你须要存储很大的数据，发起运用sessionStorage或localStorage。

  • 题目（title） — FireFox浏览器现在会疏忽该参数，虽然今后能够会用上。考虑到将来能够会对该要领举行修正，传一个空字符串会比较平安。或许，你也能够传入一个简短的题目，标明将要进入的状况。

  • 地点（URL） — 新的历史纪录条目的地点。浏览器不会在挪用pushState()要领后加载该地点，但今后，能够会试图加载，比方用户重启浏览器。新的URL不一定是绝对路径；假如是相对路径，它将以当前URL为基准；传入的URL与当前URL应该是同源的，不然，pushState()会抛出非常。该参数是可选的；不指定的话则为文档当前URL。

每次触发popstate事宜后，事宜对象中state属性保留了之前经由过程pushState()要领压入的状况对象。在《javascript威望指南》中例22-3很生动地展现了该用法，这里将这个例子放在codepen中(点击链接翻开，每次猜想数字后运用浏览器行进退却按钮视察状况恢复)，一些解释我从新写了一下便于明白，可直接在codepen中检察源码：
DEMO ?基于popstate的猜数字游戏

这里顺带提下replaceState() ，这个要领与pushState()语法相似，但它是用第一个参数（状况对象）主动替换当前状况，它并不会在浏览器历史纪录中增添历史纪录，这点相似于window.location.replace(url)

hashchange与popstate的区分归结

  • hashchange只要在hash值转变时才触发，而popstate在支撑它的浏览器中只要按下“行进”“退却”按钮就会在Window对象上触发

  • popstate事宜能够是恣意同源的url下触发，也就是说它能够在example.com/page1 与example.com/page2中都能够触发，而hashchange只要在example.com/page1#hash中才够（这点临时是个人明白，并未试验）

  • 运用事宜对象能够笼统数据，而不势必数据变成字符串加在hash中

    原文作者：囧囧
    原文地址: https://segmentfault.com/a/1190000004574465
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞