location.hash保存页面状态的技巧


Posted in Javascript onApril 28, 2016

hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)。

语法

location.hash

在我们的项目中,有大量ajax查询表单+结果列表的页面,由于查询结果是ajax返回的,当用户点击列表的某一项进入详情页之后,再点击浏览器回退按钮返回ajax查询页面,这时大家都知道查询页面的表单和结果都回到了默认状态。

如果每次返回页面都要重新输入查询条件,或有甚者还得转到列表的第几页,那这种体验用户真的要抓狂了。

在我们的项目中,写了一个很简单的JavaScript基类来处理location.hash从而保存页面状态,今天在此就分享给大家。

(本文的内容可能对于JavaScript初学者来讲有点难度,因为涉及到JS面向对象的知识,如定义类、继承、虚方法、反射等)

先看看我们的需求

我们的项目是一个基于微信的H5任务管理系统,要完成的页面原型如下图所示:

location.hash保存页面状态的技巧

需求应该都很清晰,就是点击查询表单,用ajax返回查询结果,然后点击列表中的某一个任务进入任务详情页。由于管理员(项目经理)通常会一次处理多个任务,所以就会不断在任务详情页跟查询列表页切换,这时如果按返回键不能保存查询页面状态的话,那每次返回查询页面都要重新输入查询条件,这样的体验肯定是不能忍受的。

所以,我们需要想办法将页面状态保存下来,以便用户按回退键的时候,查询条件和结果都还在。

解决思路

保存页面状态的思路有很多啦,但是我们觉得用location.hash应该是最好的方法。

思路如下:

1.用户输入查询条件并点击确定后,我们将查询条件序列化成一个字符串,并通过“#”将查询条件加到url后面得到一个新的url,然后调用location.replace(新的url)修改浏览器地址栏中的地址。

2.当用户按回退键回退到查询页面时,也可以说是页面加载时,将location.hash反序列化成查询条件,然后将查询条件更新到查询表单并执行查询即可。

思路很简单,关键的地方就是location.replace方法,这个方法不仅仅是修改浏览器中地址栏的url,更重要的是会在window.history中替换当前页面的记录。如果不用location.replace方法,那么每次回退都会回退到上一个查询条件。当然,这样的需求可能对某些项目还有用。

最终解决方案

如果本文只是分享上面的解决思路,那价值就不大了。本文的价值应该是我们写的那个虽然简单但是却很强大的JavaScript类。

如果你看明白了上面的解决思路,那就看看这个简单的JavaScript类吧:

(function() {
if (window.HashQuery) {
return;
}
window.HashQuery = function() {
};
HashQuery.prototype = {
parseFromLocation: function() {
if (location.hash === '' || location.hash.length === ) {
return;
}
var properties = location.hash.substr().split('|');
var index = ;
for (var p in this) {
if (!this.hasOwnProperty(p) || typeof this[p] != 'string') {
continue;
}
if (index < properties.length) {
this[p] = properties[index];
if (this[p] === '-') {
this[p] = '';
}
}
index++;
}
},
updateLocation: function() {
var properties = [];
for (var p in this) {
if (!this.hasOwnProperty(p) || typeof this[p] != 'string') {
continue;
}
var value = this[p];
properties.push(value === '' ? '-' : value);
}
var url = location.origin + location.pathname + location.search + "#" + properties.join('|');
location.replace(url);
}
};
})();

这个类只有2个方法,HashQuery.parseFromLocation() 方法从location.hash反序列化为HashQuery子类的实例,HashQuery.updateLocation() 方法将当前HashQuery子类的实例序列化并更新到window.location。

可以看到HashQuery这个类没有任何属性,那是因为我们只定义了一个基类,类的属性都在子类中进行定义。这也是符合实际的,因为查询条件都只有在具体的页面才知道有哪些属性。

另外,请注意这里的序列化和反序列化。这里的序列化仅仅是利用JavaScript反射机制将实例的所有字符串属性(按顺序)的值用“|”分隔;而序列化则是将字符串用“|”分隔后,再利用反射更新到实例的属性(按顺序)。

如何使用HashQuery类

使用的时候就非常简单了。

第一步,定义一个子类,将需要用到的查询条件都加到字符串属性当中,如我们的代码:

(function() {
window.TaskSearchHashQuery = function () {
HashQuery.constructor.call(this);
this.iterationId = '';
this.assignedUserId = '';
this.status = '';
this.keyword = '';
};
TaskSearchHashQuery.constructor = TaskSearchHashQuery;
TaskSearchHashQuery.prototype = new HashQuery();
})();

第二步,在查询页面调用HashQuery.parseFromLocation() 和 HashQuery.updateLocation()方法即可。下面的代码是我们完整的查询页面:

(function() {
var urls = {
list: "/app/task/list"
};
var hashQuery = null;
var pager = null;
$(document).ready(function () {
hashQuery = new TaskSearchHashQuery();
hashQuery.parseFromLocation();//在这里调用的哦,从location反序列化object
updateFormByHashQuery();
$("#btnSearch").click(function() {
updateHashQueryByForm();
hashQuery.updateLocation();//在这里调用的哦,将查询条件序列化之后更新到location.hash
$("#lblCount").html("加载中...");
pager.reload();
page.hideSearch();
});
pager = new ListPager("#listTasks", urls.list);
pager.getPostData = function(index) {
return "pageIndex=" + index + "&pageSize=" + "&projectId=" + page.projectId
+ "&iterationId=" + hashQuery.iterationId
+ "&assignedUserId=" + hashQuery.assignedUserId
+ "&status=" + hashQuery.status
+ "&keyword=" + hashQuery.keyword;
};
pager.onLoaded = function() {
$("#lblCount").html("共 " + $("#hfPagerTotalCount").val() + " 个任务");
$("#hfPagerTotalCount").remove();
};
pager.init();
});
function updateHashQueryByForm() {
hashQuery.iterationId = $("#ddlIterations").val();
hashQuery.assignedUserId = $("#ddlUsers").val();
hashQuery.status = $("#ddlStatuses").val();
hashQuery.keyword = $("#txtKeyword").val();
};
function updateFormByHashQuery() {
$("#ddlIterations").val(hashQuery.iterationId);
$("#ddlUsers").val(hashQuery.assignedUserId);
$("#ddlStatuses").val(hashQuery.status);
$("#txtKeyword").val(hashQuery.keyword);
};
})();

总结

这就是我们项目中使用location.hash来保存页面状态的全部知识了。不知道大家的WEB项目中是如何处理这样的需求的呢?

以上内容是小编给大家介绍的location.hash保存页面状态的技巧,希望对大家有所帮助!

Javascript 相关文章推荐
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
AngularJS中$http服务常用的应用及参数
Aug 22 Javascript
浅谈JS函数定义方式的区别
Oct 30 Javascript
JS库之wow.js使用方法
Sep 14 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
Nov 14 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 Javascript
字符串反转_JavaScript
Apr 28 #Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 #Javascript
基于BootStarp的Dailog
Apr 28 #Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 #Javascript
JavaScript 消息框效果【实现代码】
Apr 27 #Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 #Javascript
js实现人民币大写金额形式转换
Apr 27 #Javascript
You might like
一个php Mysql类 可以参考学习熟悉下
2009/06/21 PHP
基于empty函数的输出详解
2013/06/17 PHP
dedecms函数分享之获取某一栏目所有子栏目
2014/05/19 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
vscode下的vue文件格式化问题
2018/11/28 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
Python3多线程操作简单示例
2018/05/22 Python
Python读取指定日期邮件的实例
2019/02/01 Python
对Python3 序列解包详解
2019/02/16 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
详解python polyscope库的安装和例程
2020/11/13 Python
Python运算符+与+=的方法实例
2021/02/18 Python
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
幼儿教师思想汇报
2014/01/10 职场文书
小学生学习感言
2014/03/10 职场文书
捐书倡议书
2014/08/29 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书