浏览器中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 学习笔记
Mar 05 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
Apr 21 Javascript
javascript实现行拖动的方法
May 27 Javascript
五种js判断是否为整数类型方式
Dec 03 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
vue+iview写个弹框的示例代码
Dec 05 Javascript
浅谈Vue2.0父子组件间事件派发机制
Jan 08 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
JS立即执行函数功能与用法分析
Jan 15 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
php通过COM类调用组件的实现代码
2012/01/11 PHP
php汉字转拼音的示例
2014/02/27 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
xml和web特殊字符
2009/04/28 Javascript
JavaScript 学习笔记(九)call和apply方法
2010/01/11 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
浅谈angularJS中的事件
2016/07/12 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
vue全局自定义指令-元素拖拽的实现代码
2019/04/14 Javascript
Python 处理文件的几种方式
2019/08/23 Python
python 画图 图例自由定义方式
2020/04/17 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
Python pymsql模块的使用
2020/09/07 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
火山动力Java笔试题
2014/06/26 面试题
大学生简历中个人的自我评价
2013/10/06 职场文书
毕业自我评价范文
2013/11/17 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
文明家庭事迹材料
2014/12/20 职场文书
生日赠语
2015/06/23 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
PHP基本语法
2021/03/31 PHP
写好Python代码的几条重要技巧
2021/05/21 Python
聊聊redis-dump工具安装问题
2022/01/18 Redis