window.history详解一： 基础篇

开篇先引用MDN的一段描述：

Window.history是一个只读属性，用来获取History 对象的引用，History 对象提供了操作浏览器会话历史（浏览器地址栏中访问的页面，以及当前页面中通过框架加载的页面）的接口。

描述有些官方，从中我们可以提取三点信息：只读属性、History的实例、可以操作浏览器session级别的url。

一：只读属性：下图详解

二：History的实例： 由上图的输出可以看出，不多说。  

三： 操作session级别的url

前面讲了这么多，history到底有啥用途呢？

我们做一个不是很恰当的比方。我们看做history内部有一个栈，这个栈用来存放当前浏览器session级别（关闭前）的同一个tab下所有访问过的url，当然这个栈是不可见的（处于安全的角度）。

从图中我们可以看到，history对象并没有暴露存放历史url的属性。所以我们并不能通过类似如下方法操作会话历史：

window.history.urlList = "http://www.***.com"

这种方法是不可行的，也是非常不安全的。W3C也是出于安全的角度规定了不对外部暴露这样的属性。

那么，我们可以通过哪些属性和方法来操作浏览器的会话历史呢？

我们来看看w3c对History接口的定义：

interface History {
  readonly attribute unsigned long length; 
  attribute ScrollRestoration scrollRestoration;                                //HTML5.1
  readonly attribute any state;                                                        //HTML5
  void go(optional long delta = 0);
  void back();
  void forward();
  void pushState(any data, DOMString title, optional DOMString? url = null);         //HTML5
  void replaceState(any data, DOMString title, optional DOMString? url = null);      //HTML5
};

https://www.w3.org/TR/html51/browsers.html#session-history-and-navigation

• length属性： 记录 进入会话历史的url的数目，注意是readonly!
  
   
• back方法： 调用次方法相当于点击浏览器的后退按钮。
  此方法忽视一切参数，如果已经到最早的一个，则再次调用不做任何处理。
   
• forward方法： 调用次方法相当于点击浏览器的前进按钮。
  此方法忽视一切参数，如果已经到最新的一个，则再次调用不做任何处理。
   
• go方法： 可加载历史列表中的某个具体的页面
  此方法的推荐参数为整数类型，如果传入的是浮点数，则自动舍去小数位。
  传入负数： 后退
  传入整数： 前进
  传入0或非数值类型： 刷新当前页面 
  传入的数值超出前进或后退的范围： 不做任何处理
   
• state:  一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。只读属性，不能直接修改，可以通过pushSate和replaceState操作。
   
• pushState 在history栈中添加一个新的记录。参数：
  state： 如果不需 要这个对象，此处可以填null
  title：现在大多数浏览器不支持或者忽略这个参数，最好用null代替
  url：任意有效的URL，用于更新浏览器的地址栏，并不在乎URL是否已经存在地址列表中。更重要的是，它不会重新加载页面。
   
• replaceState 在history栈中替换当前记录，其他和pushState一样。
  
  
   
• ScrollRestoration: 前进后退时滚动条的位置。可修改属性，属性值：
  auto: 默认，保留上一次的滚动条位置。
  manual： 滚动条位置为初始化位置（垂直方向置顶，水平方向最左边）

转载于:https://my.oschina.net/u/3303095/blog/1083136