html5 设置历史记录的两种方式:

1.通过hash值的方式设置；

2.通过history设置；

具体如下两个demo:

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script>window.onload = function () {var oBtn = document.getElementById('btn');var oDiv = document.getElementById('d1');var oData= {};oBtn.onclick = function () {var num = randomNum(35,7);oDiv.innerHTML = num;//历史记录var oRd = Math.random();oData[oRd] = num;   //保存生成的随机数组到历史记录window.location.hash = oRd;}//onhashchange 当hash值改变的时候触发window.onhashchange = function () {var number = oData[window.location.hash.substr(1)]||''; //读取历史记录中对应的随机数组 .substr(1)是去掉hash值生成时的 # 符号oDiv.innerHTML = number;}function randomNum(allnum,now){//在allnum个数字中获取随机的now个数字var arr = [];var newArr = [];for(var i = 1; i<=allnum;i++){arr.push(i);}for(var i = 0;i < now; i++){newArr.push( arr.splice( Math.floor( Math.random() * arr.length ) , 1 ) );}return newArr;}}</script>
</head>
<body>
<input type="button" value="35选7" id="btn"/>
<div id="d1"></div></body>
</html>

window.location.hash = xxx //设置hash值，

window.onhashchange = function () {...} //读取hash值

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script>window.onload = function () {var oBtn = document.getElementById('btn');var oDiv = document.getElementById('d1');var iNow=1;oBtn.onclick = function () {var num = randomNum(35,7);oDiv.innerHTML = num;//history.pushState(state, title, url)/*将当前URL和history.state加入到history中，并用新的state和URL替换当前。不会造成页面刷新。state：与要跳转到的URL对应的状态信息。人话：要保存在历史记录里的内容title：目前所有浏览器都不支持，传空字符串就行了。url：要跳转到的URL地址，不能跨域。 人话：对应保存在历史记录里的路径,如果要对地址浏览器访问，需要在后台配置，否则前台无法访问*/history.pushState(num,'',iNow++);}//onpopstate 当url值改变的时候触发window.onpopstate = function (ev) {var number = ev.state||''; //获取pushState保存的值oDiv.innerHTML = number;}function randomNum(allnum,now){//在allnum个数字中获取随机的now个数字var arr = [];var newArr = [];for(var i = 1; i<=allnum;i++){arr.push(i);}for(var i = 0;i < now; i++){newArr.push( arr.splice( Math.floor( Math.random() * arr.length ) , 1 ) );}return newArr;}}</script>
</head>
<body>
<input type="button" value="35选7" id="btn"/>
<div id="d1"></div></body>
</html>

history.pushState(state, title, url)//保存历史记录
window.onpopstate = function (ev) {...}//读取历史记录 需要传入ev事件，通过事件读取之前保存的数据




转载于:https://www.cnblogs.com/sanfense/p/5081778.html
												


											

html5 历史管理相关推荐
	

    
								
  1. html5历史纪录管理,HTML 5 新增方法以及历史管理
		
    @(HTML5)[HTML5 新增方法] [TOC] 十四. HTML 5 新增方法以及历史管理 新增的获取元素的方法 静态获取的方法: document.querySelector() 选择单个元素 ...
    
		
    2. 
						
  2. java计算机毕业设计HTML5历史车轮—汴京网站MyBatis+系统+LW文档+源码+调试部署
		
    java计算机毕业设计HTML5历史车轮-汴京网站MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计HTML5历史车轮-汴京网站MyBatis+系统+LW文档+源码+调试部署 本源 ...
    
		
    3. 
						
  3. HTML5历史状态管理history API-pushState/replaceState与popstate事件
		
    tip:有问题或者需要大厂内推的+我脉脉哦:丛培森 ٩( 'ω' )و [本文源址:http://blog.csdn.net/q1056843325/article/details/60607402  ...
    
		
    4. 
						
  4. 三款改进 Chrome 浏览历史管理的扩展程序
		
    Google Chrome 提供了非常简便的查看过去访问网站历史的功能,默认情况下这些历史记录按照打开顺序倒序排列.但是如果要在历史记录中搜索先前访问过的网站,就比较困难了.Chrome的历史功能还缺 ...
    
		
    5. 
						
  5. html5 - history 历史管理
		
    参考文章: w3c     :  http://www.w3.org/html/ig/zh/wiki/HTML5/history 张鑫旭  : http://www.zhangxinxu.com/wo ...
    
		
    6. 
						
  6. Matrix Admin html5网站管理后台源码 Bootstrap响应式模板主题
		
    Matrix Admin 响应式管理后台模板最新版本,欢迎下载使用,注意:本站提供为官网购买未压缩源码版,在官网上用10$买来,现只售15元,可以帮亲省额外开销哦,需要的亲可以到本博的淘宝小店购买.  ...
    
		
    7. 
						
  7. pjax 历史管理 jQuery.History.js
		
    更新 http://www.bootcdn.cn/jquery.pjax/ 简介 pjax是一个jQuery插件,使用ajax和pushState技术提供快速的浏览体验与真正的永久链接.网页标题.以及 ...
    
		
    8. 
						
  8. Paste for Mac(剪切板历史管理工具)
		
    Paste for Mac 是一款运行在Mac OS 平台上的剪切板小工具,拥有华丽的界面效果,剪切板每一条记录可显示(预览)文本,图片等记录的完整内容,可以记录最近指定条数的剪切板信息,方便用户随时 ...
    
		
    9. 
						
  9. html5会员管理,微信会员管理系统支持客户微信一键注册成为会员？
		
    微信想要管理好会员,首先需要微信公众号与会员管理系统进行对接,通过微信注册会员,从而让会员管理系统来具体的对会员进行管理.对接后的微信公众号属于一个会员平台,会员的注册和资料管理都可直接通过微信进行操 ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. 【CV】吴恩达机器学习课程笔记 | 第1-15章
		
    2. 
						
  2. 映入眼帘的JSON-fastjson常见用法
		
    3. 
						
  3. HDU 6052 To my boyfriend（容斥＋单调栈）
		
    4. 
						
  4. 学典教育计算机二级,层次化分类的离线中文签名真伪鉴别方法-计算机工程与应用.PDF...
		
    5. 
						
  5. ASP.NET Core 1.0中的管道-中间件模式
		
    6. 
						
  6. java client_java中HttpClient的使用
		
    7. 
						
  7. 终极教程，带具体实验现象，1个GPIO控制2个LED显示4种状态，欢迎讨论！
		
    8. 
						
  8. c++fabs函数_C语言中常用的标准库函数有哪些？
		
    9. 
						
  9. Ant ：Property
		
    10. 
						
  10. 网络电台mms地址大全（一）
		
    11. 
						
  11. CIS芯片测试到底怎么测？
		
    12. 
						
  12. localstorage，sessionstorage，cookie
		
    13. 
						
  13. 看了这个，再也不怕流量劫持了！
		
    14. 
						
  14. 大一作业HTML网页作业：中华传统文化题材网页设计（纯html+css实现）
		
    15. 
						
  15. Ubuntu18.04便签工具xpad安装
		
    16. 
						
  16. LiteOS-M内核
		
    17. 
						
  17. 铁血丹心 歌词粤语转汉语谐音
		
    18. 
						
  18. php 即时聊天 实现方法,谈谈利用workerman实现即时聊天功能的方法
		
    19. 
						
  19. remind sb to do还是remind sb of doing
		
    20. 
						
  20. 解决windows未识别的网络问题
		
    21. 
		

	


热门文章
	

    
									
  1. python编译器在哪下载-Python-IDLE的下载安装及使用
			
    2. 
						
  2. python调用shell命令-「Python」6种python中执行shell命令方法
			
    3. 
						
  3. python语法大全-总结了Python中的22个基本语法
			
    4. 
						
  4. 想学python编程-【经验分享】新手如何快速学好Python？
			
    5. 
						
  5. python自学需要多久-怎么自学python，大概要多久？
			
    6. 
						
  6. python面试常见问题-常见Python面试题
			
    7. 
						
  7. python读法1002python读法-Python教程之绘制Mandelbrot集合
			
    8. 
						
  8. python实习做什么工作-面试python实习工作需要注意哪些事项？？？
			
    9. 
						
  9. python飞机大战源代码-python版飞机大战代码分享
			
    10. 
						
  10. 从零开始学python网络爬虫-从零开始学Python网络爬虫  PDF 下载
			
    11.