H5 history.pushState和history.replaceState

注意：

1. 该方法可以改变浏览器的URL，但不会刷新页面
2. 第三个参数URL处于安全考虑，必须遵守同源策略，否则报错

3. 不管你传不传URL，只要调用history.pushState， 历史栈就会新增记录
4. history.state作为常量不能直接修改

history.pushState

作用： 用于无刷新增加历史栈记录，调用history.pushState方法可改变浏览器路径

参数设置和获取

1. 设置：history.pushState(object, title, url) 状态对象，标题，url
2. 获取：

1. 1. object，histiory.state
   2. title，大部分浏览器未使用，忽略

1. 3. url，location.pathname

原理：

1. history.pushState调用会改变浏览器历史栈，即在历史栈中新增记录，指针指向新增记录

2. 若当前指针不在栈顶，此时调用history.pushState，新增记录覆盖此位置到栈底的记录，指针指向该记录

history.replaceState

与history.pushState不同的是，history.replaceState会替换当前指针位置的历史记录，不改变指针指向

第三个参数url

支持绝对路径和相对路径

（浏览器无base元素）

1. '/' 表示根路径
2. './' 表示当前路径

3. '../' 表示上级路径

假设当前路径为 /a/b/c, 以下皆以此为原始链接
1.window.pushState(null, null, './d')
	or
  window.pushState(null, null, 'd');  此时路径为 /a/b/d 
3.window.pushState(null, null, '/d');   此时路径为 /d
3.window.pushState(null, null, './');   此时路径为 /a/b/
4.window.pushState(null, null, '../');   此时路径为 /a/
  
5.window.pushState(null, null, '?name=zkj') 此时路径为/a/b/d?name=zkj
continue
window.pushState(null, null, '#hash') 此时href路径为/a/b/d?name=zkj#hash
continue
window.pushState(null, null, '?name=zzz') 此时路径为/a/b/d?name=zzz   hash值会丢失

\

（浏览器有base元素）

相对路径以base的href值为基准路径，hash，query也如此

<base href='/base/bar'>
当前基准路径为   /one/two/three
window.pushState(null, null, '#hash'); 
将重新以base的href值为基准路径，结果为 /base/bar#hash