html5历史管理

  在网易云课堂上看了妙味课堂的关于html5历史管理的课程,在这里做一下笔记。

  单页面或ajax局部刷新的页面中,没有办法通过前一步和后一步得到历史访问数据,此时有两种方法可以解决这个问题:

  1.onhashchange事件,示例代码:

<body><input type="button" value="35选7" id="input1"><div id="div1"></div><script type="text/javascript">var oInput=document.getElementById("input1");var oDiv=document.getElementById("div1");var obj={};oInput.οnclick=function(){var number=randomNumber(35,7);oDiv.innerHTML=number;var oRd=Math.random();obj[oRd]=number;window.location.hash=oRd;}window.οnhashchange=function(){var number=obj[window.location.hash.substr(1)]||'';oDiv.innerHTML=number;}function randomNumber(alls,now){var arr=[];var newArr=[];for (var i = 1; i <= alls; 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>
</body>
</html>

  

  2.history下的pushstate和popstate事件,示例代码:  

<body><input type="button" value="35选7" id="input1"><div id="div1"></div><script type="text/javascript">var oInput=document.getElementById("input1");var oDiv=document.getElementById("div1");oInput.οnclick=function(){var number=randomNumber(35,7);oDiv.innerHTML=number;history.pushState(number,'');}window.onpopstate=function(ev){console.log(1);var number=ev.state||'';oDiv.innerHTML=number;}function randomNumber(alls,now){var arr=[];var newArr=[];for (var i = 1; i <= alls; 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>
</body>
</html>

  几点说明:

  1.hash就是url中#和它后面的内容

  2.必须把hashchange事件处理程序添加给window对象,然后url参数列表只要变化就会调用它。

  3.pushstate方法接收三个参数:数据,标题(都没实现,实际开发中一般为‘’),地址(可选)

  4.popstate事件读取数据用event.state

转载于:https://www.cnblogs.com/iagw/p/6378755.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/373029.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

elementui下拉框 清空_巧妙解决element-ui下拉框选项过多的问题

1. 场景描述不知道你有没有这样的经历&#xff0c;下拉框的选项很多&#xff0c;上万个选项甚至更多&#xff0c;这个时候如果全部把数据放到下拉框中渲染出来&#xff0c;浏览器会卡死&#xff0c;体验会特别不好用人会说element-ui的select有一个remote-method&#xff0c;支…

致敬词

见义勇为致敬词 面对灾难和死神&#xff0c;你们大义凛然、知险而上&#xff0c;把平安和生机留给他人&#xff0c;把困难和危险留给自己。巍巍乎高山景行&#xff0c;铮铮然铁骨侠风&#xff1b;壮志谱传奇&#xff0c;热血写春秋。你们是&#xff1a;百姓英雄&#xff0c;平安…

MOXy作为您的JAX-RS JSON提供程序–客户端

最近&#xff0c;我发布了如何利用EclipseLink JAXB&#xff08;MOXy&#xff09;的JSON绑定来创建RESTful服务。 在本文中&#xff0c;我将演示在客户端利用MOXy的JSON绑定有多么容易。 MOXy作为您的JAX-RS JSON提供程序–服务器端 MOXy作为您的JAX-RS JSON提供程序–客户端 …

经常使用计算机的孩子,常玩电脑对孩子负面影响大,家长们不容小觑!

相信不少的家庭都会备有电脑&#xff0c;人们在网络世界里面能够找到自己需要的东西。不仅是大人喜欢玩电脑&#xff0c;小孩也喜欢玩电脑。然而常玩电脑对孩子负面影响大吗&#xff1f;有多大&#xff1f;一、行为问题全国青少年教育协会指出&#xff0c;5岁以下的使用电脑的孩…

基于SpringBoot的养老院管理系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于SpringBoot的养老院管理系统,java项…

外呼机器人起名_智能外呼机器人,目前都有哪些公司做产品?

做智能外呼机器人的企业现在已经挺多了&#xff0c;比如各个答案中提到的各家的产品。它的市场认可度也比较高&#xff0c;大家都知道它能用于通知、回访、问卷调查、营销等业务场景。外呼机器人的价值很好衡量&#xff0c;用了外呼机器人后&#xff0c;能给企业赚多少钱&#…

VMware下ubuntu与Windows实现文件共享的方法

最近安装caffe需要将Windows下文件拷贝到ubuntu16.04下&#xff0c;就进行了共享文件夹的设置&#xff0c;期间遇到一些困难&#xff0c;记录下来&#xff0c;方便以后遇到此类问题不再困惑。 &#xff08;记录只为更好的分享&#xff09; 言归正传&#xff1a; 1、首先需要在u…

前端开发流程

一般都是在我们开发一个项目之前我们会进行一个讨论会&#xff0c;然后一起分析一下这个项目应该怎么去做&#xff0c;那些地方可以用最新的一些技术&#xff0c;那些技术有兼容问题&#xff0c;哪些可以实现&#xff0c;哪些不可以实现&#xff0c;这些讨论完以后&#xff0c;…

TestNG和Maven配置指南

为了有用&#xff0c;自动测试应该运行得非常快。 否则&#xff0c;将不会在开发期间经常运行&#xff0c;甚至在开发人员工作站的默认配置中将被忽略。 最简单的规则是仅编写小型单元测试&#xff0c;该测试将模拟给定类的邻居。 但是&#xff0c;有时在IoC容器上下文&#xf…

微型计算机广告牌实验报告,微型计算机实验报告1资料.doc

实验报告1. 实验名称程序编译及调试2. 实验目的掌握汇编语言语句格式&#xff0c;程序结构&#xff0c;上机调试步骤和各种类型程序的设计方法。了解汇编语言的基本语法&#xff0c;汇编程序的功能和汇编&#xff0c;调试过程&#xff0c;伪指令&#xff0c;汇编语言程序设计&a…

mybatis入门-新手注意问题

参数问题 在映射文件中通过parameterType指定输入参数的类型&#xff1b;在映射文件中通过resultType指定输出结果的类型。 占位符和拼接符问题 #{}表示一个占位符号&#xff0c;#{}接收输入参数&#xff0c;类型可以是简单类型&#xff0c;pojo、hashmap。 如果接收简单类型&a…

python文件管理包_Python标准库04 文件管理 (部分os包,shutil包)

Python标准库04 文件管理 (部分os包&#xff0c;shutil包)在操作系统下&#xff0c;用户可以通过操作系统的命令来管理文件&#xff0c;参考。Python 标准库则允许我们从 Python 内部管理文件。相同的目的&#xff0c;我们有了两条途径。尽管在 Python 调用标准库的方式不如操作…

Delphi Berlin 10.1 for iOS 成生 info.plist 顺序改变了

在 Delphi Seattle 10 update 1 版本&#xff08;含之前版本&#xff09;&#xff0c;只要 Project > Build 会立即生成 info.plist 如果需要修改 info.plist 可以利用 TMS 提供的修改工具 Fixing on iOS 9 来修改。 在 Delphi Berlin 10.1 版本&#xff0c;顺序改变了&…

MANIFEST.MF和feature.xml版本控制规则

我永远忘记了OSIF插件和功能的 MANIFEST.MF和feature.xml中的依赖项声明的规则是什么。 谷歌搜索经常导致沮丧而不是答案。 所以&#xff0c;因为今天我实际上找到了这些规则的简要列表&#xff0c;所以我想在这里重新发布它们&#xff0c;并进行一些小的修改以帮助阐明。 OSGi…

远程桌面连接时无法访问远程计算机的计算机属性提示系统调用失败,远程过程调用失败【应对技巧】...

喜欢使用电脑的小伙伴们一般都会遇到win7系统远程过程调用失败的问题&#xff0c;突然遇到win7系统远程过程调用失败的问题就不知道该怎么办了&#xff0c;其实win7系统远程过程调用失败的解决方法非常简单&#xff0c;按照1&#xff1a;第一步我们可以看到sql server数据库出现…

MVC View显示详解(RenderBody,RenderPage,RenderSection,Partial)

一、Views文件夹 -> Shared文件夹下的 _Layout.cshtml 母版页 RenderBody 当创建基于_Layout.cshtml布局页面的视图时&#xff0c;视图的内容会和布局页面合并&#xff0c;而新创建视图的内容会通过_Layout.cshtml布局页面的RenderBody()方法呈现在标签之间。 RenderPage从…

如何在Windows系统下安装多个Redis实例

如何在Windows系统下安装多个Redis实例 转载于:https://www.cnblogs.com/xiaohui1990/p/5505944.html

注册表中shell文件不见了_win7系统注册表中的shell文件不小心被删除的解决方法...

我们在操作电脑的时候,win7系统注册表中的shell文件不小心被删除的问题对于我们来说其实是比较少见的&#xff0c;一般情况下的正常使用都不会遇到win7系统注册表中的shell文件不小心被删除的状况。但在win7系统中如果由于我们个人的不当操作导致win7系统注册表中的shell文件不…

库卡机器人C4计算机无法启动,KUKA-C4标准版机器人启动时序

描述1.T1模式下选择CELL程序&#xff0c;手动执行程序&#xff0c;注意中间路径&#xff0c;有时机器人不在HOME点附近&#xff0c;回原点的过程中需慢速运行&#xff0c;直至到达BCO。2.松开执行键&#xff0c;重新按下&#xff0c;信息栏出现“运行方式错误”提示&#xff0c…

ADF:将UI类别与动态表单一起使用

JDev 11g R2具有有趣的新功能“ UI类别”。 它使我们可以在视图对象定义级别上以声明方式对VO的属性进行分组。 例如&#xff0c;我的VEmployees视图对象的“ UI Categories”选项卡如下所示&#xff1a; 默认情况下&#xff0c;每个视图对象都有一个预定义的类别“默认”。 我…