浏览器中url存储的JavaScript实现


Posted in Javascript onJuly 07, 2015

现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起来,当你在浏览器点击后退按钮的时候,你可以冲浏览历史上获得回退的信息,这听起来并不复杂,是可以实现的,我们来编写些代码。来看看它是如何工作的。

var stateObject = {};
var title = "Wow Title";
var newUrl = "/my/awesome/url";
history.pushState(stateObject,title,newUrl);

History 对象 pushState() 这个方法有3个参数,你可以从上面的例子看到。第一个参数,是一个Json对象 , 在你储存有关当前URl的任意历史信息.第二个参数,title 就相当于传递一个文档的标题 ,第三个参数是用来传递新的URL. 你将看到浏览器的地址栏发生变化而当前页面并没刷新。

让我们看一个例子,在这个例子中我们将在每个独立的URL中存储一些任意数据。

for(i=0;i<5;i++){
 var stateObject = {id: i};
 var title = "Wow Title "+i;
 var newUrl = "/my/awesome/url/"+i;
 history.pushState(stateObject,title,newUrl);
}

现在运行,点击浏览器的返回按钮,查看URL是怎么改变的。对于每次URL的改变,是因为它存储了历史状态“id”以及对应的值。但是我们怎么重新获得历史状态,并且在此基础上做些事情呢?我们需要对“popstate”添加事件监听器,这将会在每次历史对象的状态改变的时候触发。

for(i=0;i<5;i++){
 var stateObject = {id: i};
 var title = "Wow Title "+i;
 var newUrl = "/my/awesome/url/"+i;
 history.pushState(stateObject,title,newUrl);
 alert(i);
}
 
window.addEventListener('popstate', function(event) {
 readState(event.state);
});
 
function readState(data){
 alert(data.id);
}

现在你会看到无论什么时候你点击返回按钮,一个“popstate”事件就会被触发。我们的事件侦听器然后检索历史状态对象与之关联的URL,并提示“id”的值。

它是非常的简单和有趣,不是吗?

Javascript 相关文章推荐
爱恋千雪-US-AscII加密解密工具(网页加密)下载
Jun 06 Javascript
Jquery 高亮显示文本中重要的关键字
Dec 24 Javascript
js获取时间(本周、本季度、本月..)
Nov 22 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
Bootstrap实现水平排列的表单
Jul 04 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
详解如何让Express支持async/await
Oct 09 Javascript
JavaScript Tab菜单实现过程解析
May 13 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 #Javascript
深入分析下javascript中的[]()+!
Jul 07 #Javascript
javascript实现的多个层切换效果通用函数实例
Jul 06 #Javascript
javascript动态添加删除tabs标签的方法
Jul 06 #Javascript
Jsonp post 跨域方案
Jul 06 #Javascript
javascript运动详解
Jul 06 #Javascript
浅谈jQuery中height与width
Jul 06 #Javascript
You might like
PHP5中MVC结构学习
2006/10/09 PHP
使用PHP制作新闻系统的思路
2006/10/09 PHP
修改php.ini以达到屏蔽错误信息并记录日志
2013/06/16 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
DIV菜单层实现代码
2010/11/19 Javascript
jquery通过a标签删除table中的一行的代码
2013/12/02 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
loading动画特效小结
2017/01/22 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
纯js实现画一棵树的示例
2017/09/05 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
[02:55]2018DOTA2国际邀请赛勇士令状不朽珍藏Ⅲ饰品一览
2018/08/01 DOTA
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
py中的目录与文件判别代码
2008/07/16 Python
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
使用python实现ANN
2017/12/20 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
Python with语句和过程抽取思想
2019/12/23 Python
Anaconda使用IDLE的实现示例
2020/09/23 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
美国性感内衣店:Yandy
2018/06/12 全球购物
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
新浪微博实习心得体会
2014/01/27 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang