概述
浏览器有一个history
对象用于保存浏览历史. history
对象也是window
对象的属性
window.history === history //true
history.length
属性保存浏览历史的记录数.
它还有一些方法可以在浏览历史之间移动.
back()
: 返回到上一个页面. 相当于浏览器的后退forward()
: 前进到前一个页面, 相当于浏览器的前进键go(INT_value)
: 移动到INT_value
指定的页面.INT_value
是整数. 比如go(1)
相当于forward()
,go(-1)
相当于back(). go(0)
相当于刷新页面
history.pushState()
这个方法用来向浏览历史中添加记录.它接收三个参数:
state
:一个与指定网址相关的状态对象,popstate
事件触发时,该对象会传入回调函数。如果不需要这个对象,此处可以填null
。title
:新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填null。url
:新的网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址
pushState
不会触发页面刷新, 他只会导致history
对象发生变化, 在地址栏可以看到这种变化.若为其设置了一个新的跨域网址则会报错.
history.replaceState()
这个方法的参数和pushState
方法的参数一样, 不过这个方法是用于修改浏览历史中的记录
假定当前网页是example.com/example.html
history.pushState({page: 1}, 'title 1', '?page=1');
history.pushState({page: 2}, 'title 2', '?page=2');
history.replaceState({page: 3}, 'title 3', '?page=3');
history.back()
// url显示为http://example.com/example.html?page=1
history.back()
// url显示为http://example.com/example.html
history.go(2)
// url显示为http://example.com/example.html?page=3
history.state属性
这个属性返回当前页面的state
对象
history.pushState({page: 1}, 'title 1', '?page=1');
history.state // { page: 1 }
popstate事件
每当同一个文档的浏览历史(history
对象)出现变化时, 就会触发popstate
事件
只有当用户点击浏览器的倒退和前进按钮或者使用JavaScript
调用back
, forward,
go
方法时才会触发.
popstate
事件只针对同一个文档, 若浏览器历史切换, 导致加载不同的文档, 该事件也不会触发.
URLSearchParams API
这个API
处理URL
中的查询字符串. 他有一下方法:
has()
:返回一个布尔值,表示是否具有某个参数get()
:返回指定参数的第一个值getAll()
:返回一个数组,成员是指定参数的所有值set()
:设置指定参数delete()
:删除指定参数append()
:在查询字符串之中,追加一个键值对toString()
:返回整个查询字符串
例如:
var paramsString = 'q=URLUtils.searchParams&topic=api';
var searchParams = new URLSearchParams(paramsString);
searchParams.has('topic') // true
searchParams.get('topic') // "api"
searchParams.getAll('topic') // ["api"]
若想遍历查询字符串的所有参数, 我们可以使用下面的三个方法:
keys()
:遍历所有参数名values()
:遍历所有参数值entries()
:遍历所有参数的键值对
这三个方法返回的是Iterator
对象
例如:
var searchParams = new URLSearchParams('key1=value1&key2=value2');
for (var key of searchParams.keys()) {
console.log(key);
}
// key1
// key2