浏览器history对象关于历史记录的使用

时间 2020-01-24 标签浏览器 history 对象关于历史记录使用

场景一：好比本页是B页面，前一页是A页面，如今是在跳转到下一页C页面前使用history.replaceState把本页的URL改为D页面，这样在C页面中点击返回就会回到D页面，可是如今但愿是不要返回D页面了，直接返回A页面。javascript

针对场景一，能够直接使用location.replace(‘C页面’), 这样在进入 C 页面以后, 点后退是回不到 B, 而是回到 A
replace方法:经过指定URL替换当前缓存在历史里（客户端）的项目，所以当使用replace方法以后，你不能经过“前进”和“后退”来访问已经被替换的URL。html

场景二：好比本页是B页面，前一页是A页面，如今是在跳转到下一页C页面，点击返回按钮但愿回到c页面java

针对场景二，能够直接使用h5的两个新特性，pushState和replaceStateweb

一：用法示例以下：
假如当前网页地址为http://example.com/example.html,则运行下述代码后:浏览器

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
//绑定事件处理函数. 
history.pushState({page: 1}, "title 1", "?page=1");    //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1
history.pushState({page: 2}, "title 2", "?page=2");    //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2
history.replaceState({page: 3}, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3
history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // 弹出 "location: http://example.com/example.html, state: null
history.go(2);  // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}

即使进入了那些非pushState和replaceState方法做用过的(好比http://example.com/example.html)没有state对象关联的那些网页, popstate事件也仍然会被触发.缓存

二：详细介绍一下pushState和replaceState方法：
pushState方法
pushState()有三个参数:state对象，标题(如今是被忽略，未做处理)，URL(可选)。具体细节：安全

state对象：state对象是一个JavaScript对象，它关系到由pushState()方法建立出来的新的history实体。用以存储关于你所要插入到历史记录的条目的相关信息。State对象能够是任何Json字符串。由于firefox会使用用户的硬盘来存取state对象，这个对象的最大存储空间为640k。若是大于这个数值，则pushState()方法会抛出一个异常。若是确实须要更多的空间来存储，请使用本地存储。
title—firefox如今回忽略这个参数，虽然它可能未来会被使用上。而如今最安全的使用方式是传一个空字符串，以防止未来的修改。或者能够传一个简短的标题来表示state
URL—这个参数用来传递新的history实体的URL，注意浏览器将不会在调用pushState()方法后加载这个URL。但也许会过一会尝试加载这个URL。好比在用户重启了浏览器后，新的url能够不是绝对路径。若是是相对路径，那么它会相对于现有的url。新的url必须和现有的url同域，不然pushState()将抛出异常。这个参数是选填的，若是为空，则会被置为document当前的url。

replaceState()方法
history.replaceState() 用起来很像pushState()，除了replaceState()是用来修改当前的history实体而不是建立一个新的。这个方法有时会颇有用，当你须要对某些用户行为做反应而更新一个state对象或者当前history实体时，可使用它来更新state对象或者当前history实体的url。svg

三：popstate事件
window.onpopstate是popstate事件在window对象上的事件句柄.
若是当前处于激活状态的历史记录条目是由history.pushState()方法建立,或者由history.replaceState()方法修改过的,
则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝.
调用history.pushState()或者history.replaceState()不会触发popstate事件.
popstate事件只会在其余浏览器操做时触发, 好比点击后退按钮(或者在JavaScript中调用history.back()方法).
当网页加载时,各浏览器对popstate事件是否触发有不一样的表现,Chrome 和 Safari会触发popstate事件, 而Firefox不会.函数