摘要：与事件都是浏览器历史记录，两者都是中的，相对而言比更为强大。事件本身只是监测的变化，我认为目前其主要意义就是与搭配使用从而使得在下历史记录前进后退按钮依然有效。地址新的历史记录条目的地址。
hashchange与popstate事件都是浏览器历史记录API，两者都是HTML5中的API，相对而言popstate比hashchange更为强大。注意这两种历史记录管理都受同源策略的限制，这里厘清下两者的区别以及相关应用：
hashchangehashchange事件是在浏览器URL中hash发生变化后触发的事件(事件触发后会在浏览器历史记录中添加一条记录)，URL中＃后的内容就是hash，它的变化所触发的hashchange事件与ajax搭配最多。 按我的理解， 因为hash变化并不会向服务器发生请求，所以如果没有hashchange事件，当我们点击浏览器前进和后退按钮时，服务器无法作出反应（因为服务器无法收到请求）， 有了这个事件，就可以使用js触发ajax的新请求让服务器作出响应。hashchange事件本身只是监测hash的变化，我认为目前其主要意义就是与ajax搭配使用从而使得在ajax下历史记录前进后退按钮依然有效。可以使用以下简单的代码体会下：
hashchange Click me foo Click me bar
hashchange的文档mark? hashchange
popstatepopstate事件一般与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://www.ucloud.cn/yun/78856.html
摘要：最后通过这些自己实现小型的路由。对象还提供方法这个方法用以监听浏览器在不同历史记录中进行切换，而触发相应的事件。这时调用方法后页面回退，同时页面发生刷新这时无法监听这个事件。所以可以进行降级使用来进行路由设计。不过，还提供了一个。 这篇文章主要是记录下HTML5中history提供的pushState, replaceStateAPI。最后通过这些API自己实现小型的路由。 关于win...
摘要：另外该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件不会被触发使用的时候，可以为事件指定回调函数或者回调函数的参数是一个事件对象，它的属性指向和方法为当前所提供的状态对象即这两个方法的第一个参数。 一、history window.history(可直接写成history)指向History对象，它表示当前窗口的浏览历史。History对象保存了当前窗口访问过的所...
摘要：目前前端三杰都推介单页面应用开发模式，在路由切换时替换中最小修改的部分，来减少原先因为多页应用的页面跳转带来的巨量性能损耗。 showImg(https://segmentfault.com/img/bVbn1ZN?w=3069&h=2048); 目前前端三杰 Angular、React、Vue 都推介单页面应用 SPA 开发模式，在路由切换时替换 DOM Tree 中最小修改的部分 ...
摘要：原因在于将状态对象保存在用户的磁盘上，以便在用户重启浏览器时使用，我们规定了状态对象在序列化表示后有的大小限制。新不必须为绝对路径。新必须与当前同源，否则会抛出一个异常。注意绝对不会触发事件，即使新的与旧的仅哈希不同也是如此。 Hash hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）,在页面中的hash有多种功能意义: 锚点 url: htt...
摘要：另外该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件不会被触发使用的时候，可以为事件指定回调函数或者回调函数的参数是一个事件对象，它的属性指向和方法为当前所提供的状态对象即这两个方法的第一个参数。 history window.history(可直接写成history)指向History对象，它表示当前窗口的浏览历史。History对象保存了当前窗口访问过的所有页...
阅读 2630·2021-11-22 09:34
阅读 979·2021-11-19 09:40
阅读 3123·2021-10-14 09:43
阅读 3451·2021-09-23 11:22
阅读 1486·2021-08-31 09:39
阅读 660·2019-08-30 15:55
阅读 1244·2019-08-30 15:54
阅读 726·2019-08-30 15:53
