JS实现不重载页面前提下建立一条历史纪录

时间 2019-11-08

原文原文链接

背景

最近在上班过程当中，遇到了这么一个需求，在多页面应用中，须要在几个页面上共用同一个数据来源，且切换页面不刷新页面数据，并能实现历史记录的后退功能；因前期只考虑在一个页面内实现多个页面的效果，并未考虑到历史记录堆栈中的处理，致使页面会一次性推出入口，如下为总结的几种解决方法。html

hash

在URL中，#咱们称为位置标识符，表明网页的一个位置，在咱们刚开始接触到a标签的时候，咱们不少人都有操做过锚点跳转，主要就是经过在 href 中设置想要跳到的位置的id值，在这个过程当中，页面是没有刷新的，但历史记录却新增了一条；咱们利用window.location.hash能够取得当前页面的hash值，同时也能够也能够经过其写入新的hash值，并经过监听hashchange事件，来检测hash值是否发生了改变。当咱们再点开弹框式的遮罩页面的时候，能够手动的去修改location.hash的值，这样点击window.history.back()，就能够实现历史记录回退；html5

例子

代码以下：api

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background: #ccc;
        }
        .colorBlock {
            border: 10px solid #fff;
            height: 40vh;
            width: 40vh;
            margin: 20vh auto 10vh;
            color: #ffffff;
            font-size: 40px;
            line-height: 40vh;
            text-align: center;
        }
        .colorBlue{
            border: 10px solid #fff;
            height: 40vh;
            width: 40vh;
            margin: 20vh auto 10vh;
            color: #ffffff;
            font-size: 40px;
            line-height: 40vh;
            text-align: center;
            background: cornflowerblue;
        }
        .colorgray{
            border: 10px solid #fff;
            height: 40vh;
            width: 40vh;
            margin: 20vh auto 10vh;
            color: #ffffff;
            font-size: 40px;
            line-height: 40vh;
            text-align: center;
            background: lightcoral;
        }
        .colorgreen{
            border: 10px solid #fff;
            height: 40vh;
            width: 40vh;
            margin: 20vh auto 10vh;
            color: #ffffff;
            font-size: 40px;
            line-height: 40vh;
            text-align: center;
            background: greenyellow;
        }
        .btnBlock{
            text-align: center;
        }
        .btn{
            border: 5px solid #ffffff;
            font-size: 24px;
            line-height: 50px;
            width: 40vh;
        }
    </style>
</head>
<body>
<div id="content" class="colorBlue">
    加载中....
</div>
<div class="btnBlock">
    <button class="btn">change-url</button>
</div>
<script>
    (
        function () {
            var a=0;
            setInterval(function () {
                a++;
                document.getElementById("content").innerText=a;
            },1000)
        }
    )()
    window.addEventListener("hashchange",function (e) {
        var now=location.hash && location.hash.substring(1);
        switch (now){
            case "blue":
                document.getElementById("content").setAttribute("class","colorBlue");
                break;
            case "gray":
                document.getElementById("content").setAttribute("class","colorgray");
                break;
            case "green":
                document.getElementById("content").setAttribute("class","colorgreen");
                break;
        }

    },false);
    document.getElementsByClassName("btn")[0].addEventListener("click",function () {
        var now=location.hash && location.hash.substring(1);
        if(now=="blue"){
            location.hash="gray"
            document.getElementById("content").setAttribute("class","colorgray");
        }else if(now=="gray"){
            location.hash="green"
            document.getElementById("content").setAttribute("class","colorgreen");
        }else if(now=="green"){
            location.hash="blue"
            document.getElementById("content").setAttribute("class","colorBlue");
        }
    },false);
</script>
</body>
</html>

在浏览器中打开该页面，并在路由上加上#blue,以下：浏览器

可看到以下页面，初始条件下，页面的显示加载中...，然后定时器触发更新，显示递增的数字，此时咱们能够在控制台中打印出对应的history.length,其值为2：测试

接下来，咱们经过点击change-url 按钮，去实现修改hash值，咱们能够看到，对应的路径发生了改变，#blue变为#g'ra，背景颜色也对应的更改，但此时递增的数字没有被刷新，说明咱们的页面并无通过刷新重载的过程。url

从新在控制台输入window.history.length能够看到，其值已经变为3，点击浏览器后退箭头，页面背景改成以前的蓝色背景，到这里，咱们就实现咱们想要的功能；spa

history.pushState

除了上面讲到的方法外，经过html5新增的history.pushState也能够实现一样的效果；
history.pushState和history.replaceState同是html5新增的api，均可以实现改变状态栏的url而不刷新页面，但二者的区别是，replaceState是替换当前地址为指定的url，而pushState则是建立一条新的历史纪录。执行history.back()和history.forward()后会触发window.onpopstate事件。code

API

history.pushState(state,title,url)
state:对象，能够存放一些数据表示当前的状态。当浏览器执行前进或在后退的时候，会触发onpopState事件，state将会是event对象的属性对象，能够经过event.state访问；须要注意的是，statez中的属性值不能为对象。url为将要替换的地址；若是是puhState则会添加一条历史记录；htm

例子

咱们一样能够用上面的例子来测试，只不过，咱们须要监听的是popstate事件,新建历史记录，将当前信息保存到history.state中，对象

history.pushState && window.addEventListener("popstate",function(e){})
history.pushState && history.pushState（state,title,url）

总结

以上介绍的两种方法，均可以实现页面不跳转的前提下，修改url 并新增一条新的历史记录，能够经过浏览器的默认行文执行前进后退操做，但须要注意的是，二者监听的触发修改后的响应事件不一样，且修改url的方式也不同。