这是我参与11月更文挑战的第9天，活动详情查看：2021最后一次更文挑战
前言
今天我们要谈的是web的历史管理状态，也是BOM的history的一个知识点，现代 Web 应用程序开发中最难的环节之一就是历史记录管理。用户每次点击都会触发页面刷新的时代早已过去,“后退”和“前进”按钮对用户来说就代表“帮我切换一个状态”的历史也就随之结柬了。为解决这个问题,首先出现的是 hashchange 事件（以后我们有机会也来详细谈一谈）。HTML5也为 history 对象增加了方便的状态管理特性。
历史管理状态
hashchange 会在页面 URL 的散列变化时被触发,开发者可以在此时执行某些操作。而状态管理 API 则可以让开发者改变浏览器 URL 而不会加载新页面。为此,可以使用 history . pushState (方法。这个方法接收3个参数:一个 state 对象、一个新状态的标题和一个(可选的)相对 URL 。例如:\
let stateObject ={ foo :" bar "};
history . pushState ( stateObject ," My title "," baz .htm1");
pushState (方法执行后,状态信息就会被推到历史记录中,浏览器地址栏也会改变以反映新的相对 URL 。除了这些变化之外,即使 location . href 返回的是地址栏中的内容,浏览器页不会向服务器
请求。第二个参数开始会在浏览器的头部所使用,因此既可以传一个空字符串也可以传一个短标题。第一灼应该包含正佣初始化贝面状态所必需的信息。为防止滥用,这个状态的对象大小是有限制的,通
常在500KB~ IMB 以内。
因为 pushState ()会创建新的历史记录,所以也会相应地启用“后退”按钮。此时单击“后退”栩,就会触发 windoW 对象上的 popstate 事件。 popstate 事件的事件对象有一个 state 属性,其中句含通过 pushState ()第一个参数传人的 state 对象:
window . addEventListener (" popstate ＂,( event )=>{\
1etstate. event . State ;\
if ( state )(//弟一个页面加载时状态是nul1 processState ( state );\
});\
基于这个状态,应该把页面重置为状态对象所表示的状态(因为浏览器不会自动为你做这些)。记住,页面初次加载时没有状态。因此点击“后退”按钮直到返回最初页面时, event . state 会为 null 。
可以通过 history . state 获取当前的状态对象,也可以使用 replaceState ()并传人与
pushState ()同样的前两个参数来更新状态。更新状态不会创建新历史记录,只会覆盖当前状态:
history . replaceState (( newFoo :＂ newBar "}," New title ");
传给 pushState ()和 replaceState ()的 state 对象应该只包含可以被序列化的信息。因此,
DOM 元素之类并不适合放到状态对象里保存。
注意使用HTML5状态管理时,要确保通过 pushState ()创建的每个“假” URL 背后都对应着服务器上一个真实的物理 URL 。否则,单击“刷新”按钮会导致404错误。所有单页应用程序( SPA , Single Page Application )框架都必须通过服务器或客户端的某些配置解决这个问题。\
