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 相关文章推荐
javascript 学习之旅 (2)
Feb 05 Javascript
js创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
jquery实现左右无缝轮播图
Jul 31 Javascript
JavaScript 函数模式详解及示例
Sep 07 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
JQuery中Ajax的操作完整例子
Mar 07 Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 Javascript
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
字符串反转_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
sql注入与转义的php函数代码
2013/06/17 PHP
php实现有趣的人品测试程序实例
2015/06/08 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
基于PHP制作验证码
2016/10/12 PHP
PHP多维数组排序array详解
2017/11/21 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
JS解析XML实例分析
2015/01/30 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
python之yield表达式学习
2014/09/02 Python
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
python实现电脑自动关机
2018/06/20 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
python通过nmap扫描在线设备并尝试AAA登录(实例代码)
2019/12/30 Python
python用Configobj模块读取配置文件
2020/09/26 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
一道Delphi面试题
2016/10/28 面试题
学校安全检查制度
2014/01/27 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
redis实现排行榜功能
2021/05/24 Redis
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
pandas进行数据输入和输出的方法详解
2022/03/23 Python