阅读量:3
H5的pushState和replaceState是History对象的两个方法,它们都用于修改浏览器的历史记录。
pushState方法用于添加一个新的历史记录,并且不会刷新页面。它接受三个参数:state、title和url。
- state:一个JavaScript对象,表示新的历史状态。这个对象可以包含任意的数据,用于保存页面的状态信息。
- title:新的历史记录的标题,目前大部分浏览器忽略这个参数。
- url:新的历史记录的URL,可以是相对URL或绝对URL。
例子:
history.pushState({page: 1}, "Page 1", "/page1");
以上代码将添加一个新的历史记录,URL为/page1,状态对象为{page: 1}。
replaceState方法用于替换当前的历史记录,并且也不会刷新页面。它接受三个参数:state、title和url,和pushState方法的参数相同,只是replaceState会替换当前的历史记录,而不是添加一个新的。
history.replaceState({page: 2}, "Page 2", "/page2");
以上代码将替换当前的历史记录,URL为/page2,状态对象为{page: 2}。
使用pushState和replaceState方法可以实现无刷新的页面跳转和页面状态管理,可以配合popstate事件来监听历史记录的变化,并根据状态对象进行相应的操作。