JavaScript Window History

JavaScript Window History
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：vs· js基础
作者： xqll
撰写时间：2019/5/16
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
window.history 对象在编写时可不使用 window 这个前缀。
history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。
注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，
都有自己的history对象与特定的window对象关联。
语法：window.history.[属性|方法] 注意：window可以省略。
history对象属性：length 返回浏览器历史列表中的URL数量
history对象方法：
方法 描述
back() 加载history列表中的前一个URL
forward() 加载history列表中的下一个URL
go() 加载history列表中的某个具体的页面

history. back()方法 相当于 history. go(-1)
也就是说

function goBack()
            {
                window.history.back();
            }

等同于

function goBack()
            {
                window.history. go(-1);
            }

而

function otherPage()
        {
            window.location = "xzq";
        }

是 跳转到 指定页面的意思
让效果更明显地表现出来

forward()方法，可以返回 下一个浏览器页面
意思就是说 如果你倒退之后 想回到 倒退之前的页面 的话
可以使用 forward()方法。
而
forward()相当于go(1)，
也就是说

function goForward() {
            window.history.forward();
        }

等同于

function goForward() {
            window.history. go(1);
        }

设置两个按钮上效果图

<button class="btn btn-primary" onclick="otherPage()">
跳转到其他页面</button>
        <button class="btn btn-primary" onclick="goForward()">
回到倒退之前浏览的页面</button>

设置得到的样式是这样的

当点击第一个按钮的时候

它已经跳转到 我之前指定的页面了

我返回 前一个页面再点击第二个按钮的时候
它 又跳转到 我按第一个按钮时 跳转到的页面了
也就是说 它的确 可以返回之前的页面

go()方法，
根据当前所处的页面，加载 history 列表中的某个具体的页面。
语法：window.history.go(number);
window.history.go(1); 返回前一个，等价于forward();
window.history.go(-1);后一个，等价于back();
window.history.go(3);返回当前页面之后浏览过的第三个历史页面