day219-history.pushState()

要点

  1. 例子
  2. 参数
  3. 与window.location中hash异同
  4. 原理

例子

浏览器地址改为xxx/bar.html,但是不加载,也不检查bar.html是否存在。

通过pushState可以在stateObj中保存页面状态,当页面的 url 再变回到这个 url 时,可以通过 event.state 取到这个 state 对象,从而可以对页面状态进行还原,如页面滚动条的位置、阅读进度、组件的开关。

let stateObj = {
foo: 'bar'
}
history.pushState(stateObj, 'page 2', 'bar.html')

参数

一个状态对象,一个标题,一个URL

状态对象:

用户导航到新状态时,触发popstate事件。包含该历史记录条目状态对象的副本。状态对象能被序列化,大小限制在640k以内。

标题:

给跳转的state传递短标题。

URL:

定义新的历史URL记录。新URL必须与当前URL同源。否则pushState()会抛出异常。参数可选,默认为当前URL。

异同

pushState()window.location = '#foo',两者都会在当前页面创建并激活新的历史记录。

hash相对于history.pushState()兼容性强。

新URL可以是与当前URL同源的任意URL。设置window.location仅当你只修改了哈希值时才保持同一个document(即:hash 设置的新值不能与原来的一样,一样的值不会触发动作将记录添加到栈中)。

pushState()可以将任意数据和新的历史记录项相关联(即:通过 stateObject 参数可以将任何数据类型添加到记录中)。而hash,要把所有相关数据编码为短字符串(即:只能添加短字符串)。

原理

hash

onhashchange 事件,可以在 window 对象上监听这个事件。

pushState

hash只改变#后面的代码片段,pushState可以在window对象上监听popState()事件。

文章作者: lmislm
文章链接: http://lmislm.com/2019/08/21/2019-08-21/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LMISLMのBlog