浏览器中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在页面中添加和除移DOM示例代码
Jun 24 Javascript
javascript放大镜效果的简单实现
Dec 09 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
老生常谈js动态添加事件--- 事件委托
Jul 19 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
原生js实现省市区三级联动代码分享
Feb 12 Javascript
vue中本地静态图片路径写法
Mar 06 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
Nov 19 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
浅谈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
支持oicq头像的留言簿(二)
2006/10/09 PHP
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
PHP中如何定义和使用常量
2013/02/28 PHP
基于php无限分类的深入理解
2013/06/02 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
PHP微信支付实例解析
2016/07/22 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
JavaScript实现的购物车效果可以运用在好多地方
2014/05/09 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
Bootstrap进度条实现代码解析
2017/03/07 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
详解vue 命名视图
2019/08/14 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
Python实例之wxpython中Frame使用方法
2014/06/09 Python
python使用webbrowser浏览指定url的方法
2015/04/04 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
Python基于read(size)方法读取超大文件
2020/03/12 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
Marc O’Polo俄罗斯官方在线商店:德国高端时尚品牌
2019/12/26 全球购物
公务员的自我鉴定
2013/10/26 职场文书
思想汇报范文
2013/11/04 职场文书
网络管理员岗位职责
2015/02/12 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang