Histroy API 笔记

原创 peade 随笔 笔记 142阅读 2017-05-31 11:07:01 举报

History.back() 返回上一个页面,等同于 History.go(-1)
History.forward() 进入下一个页面,等同于History.go(1)
History.go(i) 从会话历史(session history)里加载页面; 不带参数,不会有任何操作

History.pushState(state,title, url) 把给定的数据加入会话历史栈(Pushes the given data onto the session history stack )中。会创建和激活另一个和当前页面有关的历史纪录.
state object — 状态对象是一个由 pushState()方法创建的、与历史纪录相关的JS对象。当用户定向到一个新的状态时,会触发popstate事件。事件的state属性包含了历史纪录的state对象。(译者注:总而言之,它存储JSON字符串,可以用在popstate事件中。)state 对象可以是任何可以序列化的东西。由于 火狐 会将这些对象存储在用户的磁盘上,所以用户在重启浏览器之后这些state对象会恢复,我们施加一个最大640k 的字符串在state对象的序列化表示上。如果你像pushState() 方法传递了一个序列化表示大于640k 的state对象,这个方法将扔出一个异常。如果你需要更多的空间,推荐使用sessionStorage或者localStorage。
title — 火狐浏览器现在已经忽略此参数,将来也许可能被使用。考虑到将来有可能的改变,传递一个空字符串是安全的做法。当然,你可以传递一个短标题给你要转变成的状态。(译者注:现在大多数浏览器不支持或者忽略这个参数,最好用null代替)
URL — 这个参数提供了新历史纪录的地址。请注意,浏览器在调用pushState()方法后不会去加载这个URL,但有可能在之后会这样做,比如用户重启浏览器之后。新的URL不一定要是绝对地址,如果它是相对的,它一定是相对于当前的URL。新URL必须和当前URL在同一个源下;否则,pushState() 将丢出异常。这个参数可选,如果它没有被特别标注,会被设置为文档的当前URL。
示例:
var state = { 'page_id': 1, 'user_id': 5 };
var title = 'Hello World';
var url = 'hello-world.html';
history.pushState(state, title, url);

History.replaceState(state, title, url) 更具提供的数据,修改最近的历史记录。参数情况同pushState。replaceState会改变地址栏内容。

https://developer.mozilla.org/zh-CN/docs/Web/API/History
https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复