历史管理（哈希值）

时间 2019-12-08 标签历史管理哈希值

1、基本信息json

写法：地址 + “#” + 任意字母浏览器

描述：哈希值发生变化的时候会触发历史管理，若没有特殊设置页面内容不变，若有设置当点击按钮时页面内容会变化但页面不跳转服务器

触发历史管理的方法：一、跳转页面二、hash（哈希值）三、pushStatedom

历史管理的做用：点击浏览器上面的小箭头可以返回上一个访问的页面函数

JS方法——哈希值改变触发事件：测试

一、哈希改变触发函数写法：spa

window.onhashchange = function(){};

二、获取地址栏的哈希值code

写法：window.location.hashblog

描述：获取到的数值带“#”事件

获取不带#的哈希值：window.location.hash.substring(1)

H5方法——哈希值改变触发事件：

存储写法：history.pushState(数据,标题,地址可选)

获取写法：window.onpopstate = function(){ }

生效条件：在服务器下才能生效，若是在本地测试的话须要打开wamp

不能刷新页面：刷新后页面会不存在，由于是历史管理，不是实际的页面

2、实例

一、js随机选择彩票，点击浏览器返回可查看上一组彩票

window.onload = function(){
    var oInput = document.getElementById('input1');
    var oDiv = document.getElementById('div1');
    
    var json = {};
    
    oInput.onclick = function(){
        
        var num = Math.random();
        
        var arr = randomNum(35,7);
         
        json[num] = arr;
        
        oDiv.innerHTML = arr;
        
        window.location.hash = num;
        
    };
    
    window.onhashchange = function(){
        
        oDiv.innerHTML = json[window.location.hash.substring(1)];
        
    };
    
    function randomNum(iAll,iNow){
        
        var arr = [];
        var newArr = [];
        for(var i=1;i<=iAll;i++){
            arr.push(i);
        }
        
        for(var i=0;i<iNow;i++){
            newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) );
        }
        
        return newArr;
        
    }
    
};

<input type="button" value="随机选择" id="input1">
<div id="div1"></div>

二、h5随机选择彩票，点击浏览器返回可查看上一组彩票

window.onload = function(){
    var oInput = document.getElementById('input1');
    var oDiv = document.getElementById('div1');
    
    oInput.onclick = function(){
        
        var arr = randomNum(35,7);
        
        history.pushState(arr,'',arr);
        
        oDiv.innerHTML = arr;
        
    };
    
    window.onpopstate = function(ev){
        
        oDiv.innerHTML = ev.state;
        
    };
    
    
    function randomNum(iAll,iNow){
        
        var arr = [];
        var newArr = [];
        for(var i=1;i<=iAll;i++){
            arr.push(i);
        }
        
        for(var i=0;i<iNow;i++){
            newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) );
        }
        
        return newArr;
        
    }
    
};

<input type="button" value="随机选择" id="input1">
<div id="div1"></div>