HTML5(四)——历史管理HTML5新增加与历史管理有关的函数锚的概念url("https://juejin.im/e

HTML5新增加与历史管理有关的函数

锚的概念 url("juejin.im/editor/draf…") #后面的称为锚，每个页面的锚唯一
history.pushState(tag," ")利用pushstate追加历史记录第一个是追加的变量名，第二个是页面名字，可以为空，但不能不写
window.onhashchange() 监听锚的改变
windown.onpopstate当窗口历史记录改变时触发

需求:点击页面时，不光生成随机数，还需要有前进后退的历史记录

<body>
    <button>点击</button>
    <div></div>
    <p></p>
    <script>
    var oBtn = document.querySelector("button");
    var oDiv = document.querySelector("div");
    var oP = document.querySelector("p")
    oBtn.onclick = function(){
        var tag = Math.random();
        console.log(tag)
        oDiv.innerText = tag
        location.hash = tag;
    }
    // 第一步先将获得的随机数先变成页面的锚
    window.onhashchange = function(){
        oP.innerText = location.hash;
    }
    // 第二步当页面回退的时候不仅锚回退，p标签也要显示当前的锚
    // location.hash是获取当前的锚


    </script>
</body>

效果如下