浏览器中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 相关文章推荐
JQuery 操作select标签实现代码
May 14 Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
Jquery使用val方法读写value值
May 18 Javascript
javascript中caller和callee详解
Aug 10 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
Vue组件化通讯的实例代码
Jun 23 Javascript
帝国cms首页列表页实现点赞功能
Oct 30 Javascript
详解Node.js模板引擎Jade入门
Jan 19 Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 Javascript
JavaScript实现拖动对话框效果的实现代码
Oct 12 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
smarty获得当前url的方法分享
2014/02/14 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
Add Formatted Text to a Word Document
2007/06/15 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
如何实现一个webpack模块解析器
2018/10/24 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
Python requests库用法实例详解
2018/08/14 Python
Python读取实时数据流示例
2019/12/02 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
python把一个字符串切开的实例方法
2020/09/27 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
你的自行车健身专家:FaFit24
2016/11/16 全球购物
关键字final的用法
2013/10/02 面试题
护理专业推荐信
2013/11/07 职场文书
优秀导游先进事迹材料
2014/01/25 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
SQL Server内存机制浅探
2022/04/06 SQL Server
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python