history

发表于 | 分类于
字数统计: 572 | 阅读时长 ≈ 2

history

在 DOM 中，window 对象中有个 history 对象可以用来访问浏览器的历史记录；在HTML5中，更可以通过它来操作历史记录

API

back()

返回上一个访问页，与浏览器的后退按钮功能一样

1
history.back(); //回退

forward()

向前访问新的防问页，与浏览器的前进按钮功能一样

1
history.forward(); // 前进

go()

传递一个数字（正数代表前进，负数代表回退），加载相对于当前页的指定页面（当前历史记录中）

go(-1) 和 back() 的区别在于前者会丢失原页面表单内容

不同浏览器对于 go(-1) 的表现不一致，Chrome、Firefox 会刷新回退后的页面并重新请求数据，而 Safari 只会回退到原页面但不做任何操作

1
2
3
history.go(1); //前进一页
history.go(0); // 刷新当前页
history.go(-2); // 回退两页

length

返回历史记录的长度

pushState()

1
pushState(stateObj, title, URL);

state object：与新的历史记录关联的可序列化对象，大小限制为 640k 字符，超过最大限制会抛异常

title：新页面标题，目前不支持；建议传空字符，防止以后该方法发生改变

URL：可选参数，新历史记录路径；可以是相对路径，也可以是绝对路径，但必须同源；如果不传，则默认是当前页面路径

也可以通过 hash 来实现添加历史记录且不刷新页面，也有对应伪 URL 相关数据

两者对比，pushState 有一定的优势

1、使用 hash 方式，如果不改变 hash 则不会产生新的历史记录，也不会触发 onhashchange 事件；而 pushState 即使插入的是相同 URL，也会产生新的历史记录

2、使用 hash 方式，需要将传输数据编码为字符串；而 pushState 可以传递任何类型数据

replaceState()

replaceState() 与 pushState() 基本一致，不用的是，前者是修改历史记录，后者是创建新的历史记录

popstate event

PopStateEvent 包含当前页面的 state

浏览器的回退和前进操作会触发该事件，但是 pushState() 和 replaceState() 不会触发

1
2
3
window.onpopstate = (event) = > {
    console.info(event.state);
}

其他