浏览器中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 相关文章推荐
ActiveX控件与Javascript之间的交互示例
Jun 04 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 Javascript
jQuery的ajax下载blob文件
Jul 21 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
Jan 15 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
js中this的指向问题归纳总结
Nov 28 Javascript
详解js加减乘除精确计算
Mar 19 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执行速率优化技巧小结
2008/03/15 PHP
php正则替换处理HTML页面的方法
2015/06/17 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
用Python编写web API的教程
2015/04/30 Python
Django中对数据查询结果进行排序的方法
2015/07/17 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
python 中字典嵌套列表的方法
2018/07/03 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
对python中各个response的使用说明
2020/03/28 Python
Python telnet登陆功能实现代码
2020/04/16 Python
Python urllib.request对象案例解析
2020/05/11 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
美国内衣品牌:Leonisa
2016/08/14 全球购物
开放系统互连参考模型
2016/06/29 面试题
25道Java面试题集合
2013/05/21 面试题
保护水资源的标语
2014/06/17 职场文书
企业贷款委托书格式
2014/09/12 职场文书
明星邀请函
2015/02/02 职场文书
小学班主任工作随笔
2015/08/15 职场文书
《静夜思》教学反思
2016/02/17 职场文书
python-for x in range的用法(注意要点、细节)
2021/05/10 Python