JS之history对象

window对象给我们提供了一个history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中访问过的URL）。处于安全方面的考虑，开发人员无法得知用户浏览过的URL。不过，借由用户访问过的页面列表，同样可以在不知道实际URL的情况下实现后退和前进。

history对象方法和功能

1. back() 可以后退功能
2. forword() 前进功能
3. go(参数) 前进后退功能 参数如果是1前进1个页面 如果是-1后退1个页面

示例

在同一文件夹中新建两个页面ndex.html跟list.html页面，点击链接就可以链接到对应的页面里去，再点击按钮的时候就能实现前进和后退。

• index页面：

<a href="list.html">点击我去往列表页</a>
<button>前进</button>

var btn = document.querySelector("button");
btn.onclick = function () {
    history.forward();
}

• list页面

<a href="list.html">点击我去往首页</a>
<button>后退</button>

var btn = document.querySelector("button");
btn.addEventListener('click',function () {
    history.back();
})

go()方法

使用go()方法可以在用户的历史记录中任意跳转，可以向前也可以向后。这个方法接收一个参数，负数表示向后跳转，正数表示向前跳转。

var btn = document.querySelector("button");
btn.onclick = function () {
    //history.forward();
      history.go(1); //前进一页
      history.go(2); //前进两页
}

btn.onclick = function () {
    //history.back();
      history.go(-1); //后退两页
      history.go(-2); //后退两页
}

history的length属性

history对象还有一个length属性，保存这历史记录数量。这个数量包括所有历史记录，及所有向后和向前的记录。对于加载到窗口、标签页或框架中的第一个页面而言，history.length等于0。

if(history.length == 0){
    //这应该是用户打开窗口后的第一个页面
}

虽然history并不常用，但在创建自定义的“后退”和“前进”按钮，以及检测当前页面是不是用户历史记录中的第一个页面时，还是必须使用它。