html5 历史管理

Posted 2020-07-20 腾格里

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5 历史管理相关的知识，希望对你有一定的参考价值。

1、onhashchange:改变hash值来进行历史管理。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <input type="button" value="随机选择"  id="btn" />
 9         <div id="div1"></div>
10     </body>
11 </html>
12 <script>
13     window.onload = function(){
14         var oBtn = document.getElementById("btn");
15         var oDiv = document.getElementById("div1");
16         window.json = {};
17         oBtn.onclick = function(){
18             var key = Math.random();
19             var value = randomNum(35,7);
20             json[key] = value;
21             //oDiv.innerHTML = value;
22             window.location.hash = key;
23         }
24         
25         window.onhashchange = function(){
26             var hashValue = window.location.hash.substring(1);
27             if(!hashValue)return;
28             oDiv.innerHTML = json[hashValue];
29         }
30     }
31     
32     function randomNum(totlaNum,resultNum){
33         var totalArray = new Array();
34         var resultArray = new Array();
35         for(var i = 0 ;i < totlaNum;i++){
36             totalArray.push(i);
37         }
38         
39         for(var i = 1; i<= resultNum;i++){
40             resultArray.push(totalArray.splice(Math.floor(Math.random()*totalArray.length),1));
41         }
42         return resultArray;
43     }
44 </script>

2、history+pushState+ popstate事件：需要在服务器下运行。网址是虚假的，需要服务器指定对应页面，否则刷新找不到页面。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <input type="button" value="随机选择"  id="btn" />
 9         <div id="div1"></div>
10     </body>
11 </html>
12 <script type="text/javascript">
13     window.onload = function(){
14         var oBtn = document.getElementById("btn");
15         var oDiv = document.getElementById("div1");
16         window.json = {};
17         oBtn.onclick = function(){
18             var value = randomNum(35,7);
19             //pushState接收三个参数 ：数据  标题(都没实现)  地址(可选)
20             window.history.pushState(value,"");
21             oDiv.innerHTML = value;
22         }
23         
24         window.onpopstate = function(ev){
25             oDiv.innerHTML = ev.state;
26         }
27         
28     }
29     
30     function randomNum(totlaNum,resultNum){
31         var totalArray = new Array();
32         var resultArray = new Array();
33         for(var i = 0 ;i < totlaNum;i++){
34             totalArray.push(i);
35         }
36         
37         for(var i = 1; i<= resultNum;i++){
38             resultArray.push(totalArray.splice(Math.floor(Math.random()*totalArray.length),1));
39         }
40         return resultArray;
41     }
42 </script>

以上是关于html5 历史管理的主要内容，如果未能解决你的问题，请参考以下文章

常用HTML5代码片段

十个html5代码片段，超实用，一定要收藏

HTML5历史状态管理history API-pushState/replaceState与popstate事件

ASP.NET 5 HTML5 历史

Gitlab代码管理仓库安装部署