浏览器的前进后退

设置浏览器的前进或后退，涉及到history对象的使用。
它包含了用户在浏览器窗口中访问过的url地址，数以window这个对象下的一部分。

history对象的属性

• length：
  返回浏览器历史列表中的url条数，用户在当前标签每访问一个页面，length就会自动加1。
  但是出于隐私原因，无法获取具体的url的记录值。

• state：
  与当前网址相关得对象，只能通过pushState和replaceState添加或者修改，也可以用来存储跟url有关得信息。

浏览器的前进和后退

history.back(): 加载history列表中前一个url地址，相当于后退；
history.forward(): 加载history列表中下一个url地址，相当于前进按钮；

• back()和forward()两个方法都不用传参，一次加载（后退/前进）一个url得文档内容。

与go()方法的区别：

history.go(number|URL)

• 需要传递一个整形得参数number或者是一个url地址。

• 该参数可以是数字，使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。（-1上一个页面，1前进一个页面)。

• number > 0, 前进number页

• number = 0，刷新当前页

• number < 0， 后退number页

• 使用字符串url参数，go() 方法可加载历史列表中的某个具体的页面。

  • 字符串必须是局部或完整的URL，该函数会去匹配字符串的第一个URL

• forward() 等价于 go(1)

• back() 等价于 go(-1)

举个栗子：

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

history.pushState(state, title, url)

它可以用来 改变url，并且不刷新页面。
原理： 她会改变当前页面的location.href并且修改当前的history.state对象，执行后history.length会增加1。

• state：当前网址相关的对象。
• title：页面标题，但是所有浏览器都忽略它，要改变标题还是要用document.title。
• url：一个与当前页面同域的网址，location.href会变成此值。

history.replaceState(state, title, url)

它只会修改当history.state和location.href，用法同pushState，但它不会改变history.length。

pushState和replaceState第三个参数不可跨域，并且不会触发浏览器的popstate事件和onhashchange事件

其他方法达到无刷新

可以通过改变location.href或location.hash来达到无刷新的目的。