场景：输入 ： www.badu.com，这时候这个网址已经被浏览器添加到历史管理中了，再输入另一个网址，也会存到历史管理，所以这个时候点击浏览器的前进后退，就可以切换了，所以说历史管理就是用来控制之前浏览过的一些网站的顺序，然后通过点击可以前进后退，来看你刚才看了些什么东西。

历史管理的条件是需要有跳转才有，如果不跳转页面（比如在百度搜索框输入相关内容），就不会有历史管理。

一般情况下是通过跳转页面产生历史管理，另一种就是hash值。

如果给一个网址后面添加hash,如http://www.baidu.com改成：https://www.baidu.com/#66666

这时候就发现浏览器回退按钮亮了，就可以回退了。

总结 ： 触发历史管理的三种方法

1.跳转页面

2.更改hash

3.pushState

应用:

很多网站已经做成了一站式，就是不跳转页面，只在一个页面中进行来回的切换，跳转的时候发现只是改变了hash,所以有了历史管理。

事件 ：

**onhashchange **: 当hash值发生了变化的时候，这个事件就会被触发

History:

--服务器下运行

--pushState:三个参数 ：数据、标题（都没实现），地址（可选）

--popState事件:读取数据event.state

--注意：网址是虚假的，需要服务器指定对应页面，不然刷新找不到页面

案例 :随机选彩票

方法一、使用onhashchange监控hash实现触发历史管理

1.先写一个方法，参数：总数，抽取N个随机数

image

2.使用onhashchange

image

letbtn=document.getElementById('btn');

letdiv=document.getElementById('div1');

letjson={}

btn.onclick=function(){

let num=Math.random()

let arr=randomNum(35,7)

json[num]=arr//将新数组分别映射到json

div.innerHTML=arr

window.location.hash=num//触发hash

}

window.onhashchange=function(){

div.innerHTML=json[window.location.hash.substring(1)]

}

functionrandomNum(arr,newarr) {

let arr1=[];

for(let i=1;i<=arr;i++){

arr1.push(i)

}

let arr2=[];

for(let i=1;i<=newarr;i++){

arr2.push(arr1.splice(Math.floor(Math.random()*arr1.length),1))

}

returnarr2

}

方法二、History

image

btn.onclick=function(){

let arr=randomNum(35,7)

history.pushState(arr,'')//三个参数 ：数据、标题（都没实现），地址（可选）

div.innerHTML=arr

}

window.onpopstate=function(ev){

div.innerHTML=ev.state//读取数据event.state

}