html5的onhashchange和history历史管理

我的一个小黑人 2014-09-20

作者：zccst

现在的开发，越来越倾向于页面内跳转，这种情况下需要更新自己的知识，来实现页面内跳转。history就是解决这个问题的。

HTML5有两种解决办法：

1，onhashchange

用到了window.loaction.hash对象（存，取）

2，history

(1)pushstate三个参数：数据，标题（为空），url（可选）。

(2)popstate是一个事件，读取event.state数据

注意：url是虚假的。用户不能实际找到。

本质上：两种方式都是存值+取值事件。简化后就是：

window.loaction.hash=srcArr;

window.onhashchange=function(){

varval=window.loaction.hash;

}

和

history.pushState=srcArr;

window.onpopstate=function(event){

varval=event.state;

};

详情参考如下参数随机数例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script type="text/javascript">

window.onload=function (){
	var oInput = document.getElementById("input1");
	oInput.onclick=function(){
		var oDiv = document.getElementById("div1");
		var num = generateNum (6);

		//onhashchange
		window.location.hash = num;
		window.onhashchange = function(){
			oDiv.innerHTML = window.location.hash.substring(1);
		}
		

		//history
		/*
		history.pushState(num, '');
		window.onpopstate = function(event){
			oDiv.innerHTML=event.state;
		}*/
		oDiv.innerHTML=num;


		//生成随机数
		function generateNum (num){
			var ret = [];
			for (var i = 0; i < num; i++) {
				ret.push(Math.ceil(100*Math.random()));
			};
			return ret;
		}
	}
}


</script>
</head>

<body>
	中奖号码：
<div id="div1"></div>

<input type="button" value="生成随机号码" id="input1" />
</body>
</html>

如果您觉得本文的内容对您的学习有所帮助，您可以微信：

我的一个小黑人

我的一个小黑人

相关推荐

如何使用Bash history命令

Bash 的 history 命令在它提供的功能数量上超过了所有其他 Linux Shell 历史接口。也就是说，它是一个古老的的 shell，还有一个更古老的 Shell 的前辈，但是它还有一个很棒的history命令，它提供的功能数量超过了所有其他 s

renshuguo / 0评论 2020-06-24

Linux命令行history

登录进shell后新执行的命令只会记录在内存的缓存区中；这些命令会用户正常退出时“追加”至命令历史文件中。可以用它来重复执行命令，提高输入效率。-d offset: 删除历史中指定的第offset个命令。命令历史相关环境变量。HISTTIMEFORMAT=

yuzhongdelei0 / 0评论 2020-06-13

ClickHouse奇技淫巧系列之SQL查文件

history | awk ‘{print $1"\t"$2}‘ | clickhouse-client --query="SELECT shell, count() AS c FROM history GROUP BY sh

Yyqingmofeige / 0评论 2020-05-16

Vue-router 中hash模式和history模式的关系

在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的。对于vue这类渐进式前端开发框架，为了构建 SPA，需要引入前端路由系统，这也就是 Vue-Router 存在的意义。hash ——

haohong / 0评论 2020-04-08

sql优化之大数据量分页查询（mysql）

当需要从数据库查询的表有上万条记录的时候，一次性查询所有结果会变得很慢，特别是随着数据量的增加特别明显，这时就需要使用分页查询。对于数据库分页查询，也有很多种方法和优化的点。为了对下面列举的一些优化进行测试，需要使用已有的一张表作为实际例子。字段情况：该表

tanyhuan / 0评论 2020-03-01

MySQL Performance-Schema(一) 配置篇

_schema 05:47:27>select * from setup_actors;+------+------+------+| HOST | USER | ROLE |+------+------+------+| % | % |

kuwoyinlehe / 0评论 2020-01-02

让Linux的history命令显示用户名和时间

export HISTTIMEFORMAT="%Y%m%d_%T `whoami` `who am i|awk ‘{print $1,$5}‘|sed ‘s/ //‘` ". export PROMPT_COMMAND=‘history

zlsh00 / 0评论 2019-12-29

Centos History 命令历史记录添加执行时间

Centos History 命令历史记录添加执行时间。在/etc/profile尾部加入以下环境变量。执行环境变量生效。# 命令的间隔可以在定义环境变量时自已调整

85407718 / 0评论 2019-12-06

vue-router的HTML5 History 模式设置

VUE是当下最火爆的前端框架之一，vue-router是vue项目中几乎都会用到的组件，然而体验一时爽，其实坑不少。本篇经验将详细介绍vue-router的两种mode效果和开发测试环境下的问题，并给出解决方案。vue-router的HTML5 Histo

81487308 / 0评论 2018-09-08

centos配置history记录每个用户执行过的命令（转载）

对于系统管理员而言，history是一个很重要的命令，它能显示出之前在shell中执行过的命令，如果服务器发生异常，可以从这些命令中分析造成问题的原因。但是history显示的信息有局限性，默认保存最近的1000条命令，从历史信息中只能看到某个命令的执行有

Aveiox / 0评论 2018-06-11

一文了解vue-router之hash模式和history模式

即地址栏 URL 中的 # 符号。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上

80437700 / 0评论 2019-05-31

vue-router源码之history类的浅析

对于vue-router来说，有三种路由模式history,hash,abstract, abstract是运行在没有window的环境下的，这三种模式都是继承于history类，history实现了一些共用的方法，对于一开始看vue-router源码来说

81427605 / 0评论 2019-05-21

vue-router启用history模式下的开发及非根目录部署方法

对于 Vue 这类渐进式前端开发框架，为了构建 SPA，需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 ―― 改变视图的同时不会向后端发出请求。vue-router 的 history 模式是个提高颜值的好东西，没

89477009 / 0评论 2018-12-23

浅析vue-router原理

近期被问到一个问题，在你们项目中使用的是Vue的SPA（单页面）还是Vue的多页面设计？关于如何展开Vue多页面设计请点击查看。首先我们需要知道vue-router是什么，它是干什么的？这里指的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA的路

81487308 / 0评论 2019-09-04

浅谈vue项目4rs vue-router上线后history模式遇到的坑

此次项目开发完后准备打包，因为hash模式的路径带#看着实在是有点丑，所以采用history模式。因为本次项目属于以前网站重构，但是seo问题，所以需要以前的一些地址路径写，所以vue-router的路径全部重改了。打包后查了网上一大堆，都说要把confi

84307063 / 0评论 2018-09-27

history命令的使用方法

如果你经常使用Linux命令，那么使用history命令无疑会提升你的工作效率。History命令主要用于显示历史指令记录内容, 下达历史纪录中的指令 。Linux系统当你在shell(控制台)中输入并执行命令时，shell会自动把你的命令记录到历史列表中

DBATips / 0评论 2018-01-26

linux的.bash_history

今天看到一个人写的文章，说通过.bash_history来获取SSH的私钥，很危险的说。那么linux的.bash_history的作用是什么呢？Bashshell在“~/.bash_history”文件中保存了500条使用过的命令，这样可以使你输入使用过

heroxsx / 0评论 2013-02-23

Linux history 时间 用户 ip设置

在使用linux服务器的时候发生一些不知道谁操作的问题，google一下说history命令可以查看到历史记录，用过之后发现还是不够详细，再google，原来可以自己设置history的显示。USER_IP=`who -u am i 2>/dev/n

zousongshan / 0评论 2012-09-08

Linux历史命令相关

如果你经常使用 Linux 命令行，那么使用 history（历史）命令可以有效地提升你的效率。本文将通过实例的方。式向你介绍 history 命令的15个用法。当你从命令行执行 history 命令后，通常只会显示已执行命令的序号和命令本身。如果想对找到

Andyshrk / 0评论 2012-07-31

Linux清除用户登录记录和命令历史方法

[root@localhost root]# echo > /var/log/wtmp #此文件默认打开时乱码，可查到ip等信息

Kshine0 / 0评论 2012-07-17

Linux系统下history命令的记录如何删除

　　清除用户home路径下。　　3、bash执行命令时不是马上把命令名称写入history文件的，而是存放在内部的buffer中，等bash退出时会一并写入。

Attend / 0评论 2011-11-07

linux下history命令的使用方法

如果你经常使用Linux命令，那么使用history命令无疑会提升你的工作效率。History命令主要用于显示历史指令记录内容,下达历史纪录中的指令。History命令的用途确实很大！但需要小心安全的问题!因为不小心的root会将很多的重要资料在执行的过程

rechanel / 0评论 2011-04-20

linux history

Linux系统当你在shell(控制台)中输入并执行命令时，shell会自动把你的命令记录到历史列表中，一般保存在用户目录下的.bash_history文件中。linux中history命令不仅仅让我们可以查询历史命令而已.我们还可以利用相关的功能来帮我们

伏雌摘星阁 / 0评论 2011-04-06

linux下history（历史）命令用法详解

如果你经常使用 Linux 命令行，那么使用 history（历史）命令可以有效地提升你的效率。本文将通过实例的方式向你介绍 history. 命令的15个用法。当你从命令行执行 history 命令后，通常只会显示已执行命令的序号和命令本身。如果你想要查

hackerlpy / 0评论 2011-03-24

linux下history（历史）命令用法详解

如果你经常使用 Linux 命令行，那么使用 history（历史）命令可以有效地提升你的效率。本文将通过实例的方式向你介绍 history 命令的15个用法。当你从命令行执行 history 命令后，通常只会显示已执行命令的序号和命令本身。如果你想要查看

secondid / 0评论 2010-07-12

Vue项目history模式下微信分享总结

每回遇到微信分享都是一个坑，目前的商城项目使用Vue开发，采用history的路由模式，配置微信分享又遇到了很多问题，最后终于解决了，现将解决的过程分享一下。是否成功绑定了域名使用最新的js-sdk文件，因为微信会改部分apiconfig方法的参数是否传正

柳峰 / 0评论 2019-07-01

vue-router实现原理

近期面试，遇到关于vue-router实现原理的问题，在查阅了相关资料后，根据自己理解，来记录下。我们知道vue-router是vue的核心插件，而当前vue项目一般都是单页面应用，也就是说vue-router是应用在单页面应用中的。在单页面应用出现之前，

89701933 / 0评论 2019-07-01

centos history

USER_IP=`who-uami2>/dev/null|awk'{print$NF}'|sed-e's/[()]//g'`. if[!-d$HISTDIR]. if[!-d$HISTDIR/${LOGNAME}]. exportHISTFILE=&

fhxyxzw / 0评论 2018-06-22

分享一款拥有历史搜索记录的微信小程序搜索框--wx-search-have-history

使用此组件需要依赖小程序基础库 2.2.1 或以上、及开发者工具 1.02.1808300 或以上，同时依赖开发者工具的 npm 构建。具体详情可查阅微信小程序 npm 支持文档。使用效果1、 通过输入进行搜索。使用方法1、 安装 wx-search-ha

wjeymiantan / 0评论 2019-06-30

vue-router源码解析（三）路由模式

路由模式及降级处理vue-router 默认是 hash 模式 ， 即使用 URL 的 hash 来模拟一个完整的 URL ，于是当 URL 改变时，页面不会重新加载。在不支持 history.pushState 的浏览器 ， 会自动会退到 hash 模式

落地窗前梦残夜 / 0评论 2019-06-30

vue-router 启用 history 模式下的开发及非根目录部署

vue-router 的 history 模式是个提高颜值的好东西，没有了 hash 的路由看起来清爽许多。开发的时候，如果我们使用 devServer 来启动服务，由于一般不共用端口，我们一般不存在非根目录的问题。而刷新后 404 的问题可以借助 his

84307063 / 0评论 2019-06-30

单页应用history路由改造

需求调用其它团队流量站埋点统计时会截取锚点#，导致单页应用分页面流量分析获取不到数据。而本项目迫切需要按菜单、特殊功能模块统计流量情况，等不及流量站的团队开发升级版，于是选择改造项目路由为hostory模式。单页应用路由实现思路SPA，只加载一个HTML，

Techgogogo / 0评论 2019-06-29

Vue平凡之路 （一）：Vue-router 中hash模式和history模式

Vue-router 中hash模式和history模式的关系在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发

89711338 / 0评论 2019-06-28

HTML5 history历史记录的几个关键词

A) history.length：当前历史列表中的历史记录数； B) history.go：前进或后退n条记录，当n=0或空时会刷新当前页； C) history.back()：后退一步； D) history.forward()：前进一步;因此我们有必

wangnan0 / 0评论 2016-01-28

HTML5之history管理

比较简单的历史记录管理技术是通过location.hash和hashchange事件来实现的。在浏览器中设置location.hash会改变当前的URL，同时也会在浏览器的历史记录中增加一条记录。支持HTML5的浏览器当发现URL中的片段发生变化时，就会在

来老师 / 0评论 2014-10-05

用JS将页面定位到某个位置（DIV）

昨天一个朋友问我如何在页面加载完成后，自动将页面定位到某个位置，当时有些忙，就没来得及解决。殊不知今天在做PHP教程的项目中也有了同样的需求：为了页面美观，需要只显示用户从楼盘相册点击后进入的相册幻灯页面的楼盘信息。hostname设置或返回当前URL的主

mannoroth / 0评论 2014-04-23

详解express使用vue-router的history踩坑

vue-router 默认 hash 模式 ―― 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.push

81487308 / 0评论 2019-06-05

如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)

本文主要是对connect-history-api-fallback库进行一次源码分析。connect-history-api-fallback是一个用于支持SPA History路由模式的nodejs库。阅读本文前，应对HTML5 History模式有一

mbcsdn / 0评论 2019-05-30

Nginx 反向代理的进本配置以及Vue-router history模式配置

log_format main '$remote_addr - $remote_user [$time_local] "$request" '. # Load modular configuration files from the

huzilinitachi / 0评论 2019-06-25

How to migrate svn to gitlab with full history logs

When migrating the source codes from svn to gitlab, we also would like to consider the svn logs migration. Recently we are worki

LargebeaR / 0评论 2019-06-21

(HTML5)pushState/replaceState实现无刷新改变内容及地址栏

HTML5 history对象新方法pushState-replaceState

zhangpeng / 0评论 2013-03-02

有趣的API： history pushState/popstate 无刷新跳转

不得不说，张鑫旭真的厉害。history.pushState : 无刷新的向浏览器 历史最前方 加入一条记录。state 需要保存的数据，这个数据在触发popstate事件时保存在event.state上。Firefox 目前忽略了這個參數，雖然他以後有

huangliuyu00 / 0评论 2019-06-21

「前端」History API与浏览器历史堆栈管理

本文发表于尚妆博客，欢迎订阅！移动端开发在某些场景中有着特殊需求，如为了提高用户体验和加快响应速度，常常在部分工程采用SPA架构。第一个参数用于存储该url对应的状态对象，该对象可在onpopstate事件中获取，也可在history对象中获取。onpop

mislyvinky / 0评论 2019-06-21

A Quite Biased History of HTML5

2. HTML has alwaysbeen a conversation between browser makers, authors, standards wonks, and otherpeople who just showed up and l

XaverSun / 0评论 2012-05-23

HTML5：History API

大家在浏览Facebook的相册时有没有发现，页面局部刷新的同时地址栏的地址也改变了，而且不是hash的方式。它使用的就是HTML5 history新增的几个API，作为window的一个全局变量，在HTML4的时代history已不是什么新鲜的事物了。我

lqadam / 0评论 2011-11-21

JavaScript中的History历史对象

JavaScript中的History历史对象包含了用户已浏览的 URL 的信息，是指历史对象指浏览器的浏览历史。鉴于安全性的需要，该对象收到很多限制，现在只剩下下列属性和方法。JavaScript 所能管到的历史被限制在用浏览器的“前进”“后退”键可以去

javaer / 0评论 2011-07-28

Linux学习记录--命名别名与历史命令

alias 如后面什么也不跟。代表查询所有别名命名信息。alias which='alias | /usr/bin/which --tty-only --read-alias --show-dot --show-tilde'举例2：设置别名。[root@l

YaoGUET / 0评论 2014-03-05

shell、history命令及配置文件、tab补全、通配符和输出重定向

shell是系统跟计算机硬件交互时使用的中间介质，它只是系统的一个工具。至shell，把它比作人的五官似乎更贴切些。言归正传，用户直接面对的不是计算机硬件而是shell，用户把指令告诉shell，然后shell再传输给系统内核，接着内核再去支配计算机硬件去

lishaokang / 0评论 2018-10-12

Linux系统如何定制History输出格式

Linux系统使用History命令来查看系统的运行记录，从而找出一些问题。但是History输出的数据中常常没有时间等信息。本文就来教大家Linux系统如何定制History输出格式。以root用户登录服务器，在/etc/profile.d/下新建一个文

zhangskd / 0评论 2018-12-14