History Api以及hash操作

https://segmentfault.com/a/1190000002447556#articleHeader12

https://developer.mozilla.org/zh-CN/docs/Web/Events/hashchange

事件类型一栏表：https://developer.mozilla.org/zh-CN/docs/Web/Events

Hash

修改hash以及检测hash变化的两种方式：

<a href="#two">click to change hash two</a>
<button onclick="location.hash='a'+Math.random()">随机hash</button>
<script>
    window.onhashchange = function(){
        console.log(location.hash)
    }

    window.addEventListener("hashchange",function(){
        console.log(location.hash)
    })
</script>

hash值会附在浏览器url地址的尾部，如www.xx.com?a=123#one。hash被修改之后，可以点击后退前进，回到修改前后的页面，hashchange事件会被触发，页面不会刷新。

 

ps：回顾事件绑定的规律，对于事件xx，有以下三种方式绑定

1. dom.onxx = ...
2. addEventlistener('xx',...)
3. attachEvent('onxx',...)

History Api

使用pushState，可以实现修改浏览器的url，却不发送页面请求，页面没有刷新，点击后退按钮可以回到修改前的url，前进或者后退，页面都不会刷新（因为页面始终是同一个document，前进后退的过程会触发onpopstate事件），也不会有新的网络请求，给人的感觉就像是仅仅切换了url的显示一样。

而replaceState，仅仅是替换当前的url，除此之外没任何变化。

 

对于以下代码，页面第一次打开的时候，无输出，浏览器地址变为了index.html，此时点击后退，会打印pushState前的地址，点击前进，会打印index地址

<script>
    history.pushState(null,"","http://localhost:8888/index.html")
    window.onpopstate = function(){
        console.log(location.href)
    }
</script>

也就是说，仅当使用了pushState，然后点击前进或后退，这个事件才会被触发。

应用场景

　　我希望把一个页面发给别人看，就把地址发了过去，但发现别人看的页面的状态和我现在的页面状态不一致。这种不一致的原因是，页面中使用了异步请求，而进行了多少次异步请求以及请求了什么，这些页面的状态并不能反映到url上面，所以把url发给别人，我页面的状态当然也就不能再别人那里重现了。

　　解决的办法是把页面中的异步请求信息添加到url上，或者说异步请求的信息要与url进行同步，步骤如下：当第一次打开页面的时候，获取url，根据url中的信息进行异步请求，达到url与页面状态进行同步。当用户在页面上进行交互，触发了异步请求，完成后也要修改url，达到页面状态与url的同步。

　　以上关键的地方就是修改url，但不能重新刷新，因为一刷新的话页面的状态又回到原点了，不是我们想要的。修改url就需要用到以上的hash 和 history api了，也可以添加query 参数（replaceState替换为原来的地址，只不过后面加上参数）

 

对比hash和history api。

　　相同点：修改hash对应pushState，hashchange事件对应popstate事件，两者的行为表现一致：切换的时候页面不刷新，改变的时候会留下历史记录，可供用户前进或后退。

　　不同点：history api 比 hash 多出来一个replaceState方法，以及修改后的url格式不同而已