history 相关api

发表于 | | 阅读次数:
  • event->popstate
  • fn-> pushState
  • fn-> replaceState
  • fn -> back
  • fn -> forward
  • fn -> go
  • property->length

基本就是上述几个相关api

length
可以查到当前window下面的history的length，暴露给用户的只读属性，我们是没办法直接清楚history的，但我们可以改变历史。
history维护了一个历史栈，每次链接点击或者pushState都会产生一个记录，length会+1，
back跟forward时，会改变当前指针的指向，这时若产生一条新历史（通过点击或者pushState），则会替换栈顶的记录，但是length不会变


popstate
是浏览器back事件才会触发的事件，pushState或者replaceState是不会触发的，并且监听的e对象会有当前的state可以看到
Tips：这里看到的e，很多人都会联想到，preventDefault阻止默认行为，这里是不可以的，不过你可以back时监听，然后forward。。。不过意义是什么。看场景吧

1
window.addEventListner('popstate',(e)=>{console.log(e.state)})

pushState

1
2
window.history.pushState(stateObj,title,url)
// 例 window.history.pushState("page","",location.href);

以下内容来MDN:_%E6%96%B9%E6%B3%95)
三个参数: 一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个URL. 让我们来解释下这三个参数详细内容：

  • 状态对象 — 状态对象state是一个JavaScript对象，通过pushState () 创建新的历史记录条目。无论什么时候用户导航到新的状态，popstate事件就会被触发，且该事件的state属性包含该历史记录条目状态对象的副本。
    状态对象可以是能被序列化的任何东西。原因在于Firefox将状态对象保存在用户的磁盘上，以便在用户重启浏览器时使用，我们规定了状态对象在序列化表示后有640k的大小限制。如果你给 pushState() 方法传了一个序列化后大于640k的状态对象，该方法会抛出异常。如果你需要更大的空间，建议使用 sessionStorage 以及 localStorage.
  • 标题 — Firefox 目前忽略这个参数，但未来可能会用到。在此处传一个空字符串应该可以安全的防范未来这个方法的更改。或者，你可以为跳转的state传递一个短标题。
  • URL — 该参数定义了新的历史URL记录。注意，调用 pushState() 后浏览器并不会立即加载这个URL，但可能会在稍后某些情况下加载这个URL，比如在用户重新打开浏览器时。新URL不必须为绝对路径。如果新URL是相对路径，那么它将被作为相对于当前URL处理。新URL必须与当前URL同源，否则 pushState() 会抛出一个异常。该参数是可选的，缺省为当前URL。

replaceState

1
2
window.history.replaceState(stateObj,title,url)
//例 window.history.replaceState("page","",location.href);

参数跟pushState一致，就不过都赘述了，注意，replaceState不会增加length，只会替换当前页面的记录

go,forward,back就是前进后退的操作方法，改变历史栈中的指针位置