温馨提示×

H5的pushState与replaceState的用法

h5
小亿
107
2024-01-02 18:13:28
栏目: 编程语言

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事件来监听历史记录的变化,并根据状态对象进行相应的操作。

0