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

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

语法

location.hash

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

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

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

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

先看看我们的需求

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

需求应该都很清晰,就是点击查询表单,用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保存页面状态的技巧,希望对大家有所帮助!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索location.hash
location.hash、window.location.hash、location.hash 定位、js location.hash、location.hash 刷新,以便于您获取更多的相关知识。

时间: 2024-09-20 04:46:45

location.hash保存页面状态的技巧_javascript技巧的相关文章

利用location.hash实现跨域iframe自适应_javascript技巧

页面域关系: 主页面a.html所属域A:www.jb51.net 被iframe的页面b.html所属域B:www.baidu.com,假设地址:http://www.baidu.com/b.html 实现效果: A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要a.html中的iframe自适应大小. 问题本质: js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取

js如何准确获取当前页面url网址信息_javascript技巧

在WEB开发中,时常会用到javascript来获取当前页面的url网址信息,在这里是我的一些获取url信息的小总结. 下面我们举例一个URL,然后获得它的各个组成部分:http://i.cnblogs.com/EditPosts.aspx?opt=1 1.window.location.href(设置或获取整个 URL 为字符串) var test = window.location.href; alert(test); 返回:http://i.cnblogs.com/EditPosts.as

页面无限跳转间如何保存页面状态(1)

页面 引子 这是一个极其困难的题目,仅仅是描述一遍,都会非常困难,不过我尝试一下,希望能描述清楚: 我们公司是采用list/Detail的页面逻辑,即list页面有一个DataGrid,列出了一些项,点击其中一项后,页面跳转到Detail页面查看该项的详细.Detail页面有一个返回按钮,点击后即返回到list页面.list中的数据列表通常是经过筛选的,如xxx大于20的,然后还经过了排序的. 现在问题是这样的: 用户要求,当从Detail返回到list中时,数据列表中的状态不变. 公司认为,这

页面无限跳转间如何保存页面状态(2)

页面 解决方法的实现 以上分析过了之后,我们来看如何实现他: class DataInfo:这个类用于保存数据状态,一般而言,也就是每个DataGrid对应一个:[Serializable()] public class DataInfo { private string dataName; private Hashtable searchParams; private Hashtable otherParams; private int currentPage; private string

js中hash和ico的关联分析_javascript技巧

本文实例分析了js中hash和ico的一些关联.分享给大家供大家参考.具体如下: 近期测试提出一个bug,说某几个页面中的ico不显示,于是针对此问题排查原因. 首先,确保页面中的link已引入favicon.ico.经查看,发现是js中的location.hash导致了ico不显示.原因是在ico未加载完毕时设置了location.hash从而导致ico不显示. location.hash在项目中经常用到,用于url定位,例如http://h.liepin.com/#job-manage中的"

js不能跳转到上一页面的问题解决方法_javascript技巧

问题描述:我们有两个页面A和B,当我们从A跳到B后不做作任何让页面回传的操作,用JS:history.go(-1)就可以回到A页面,但是比如我们有Click,Change事件等激发了页面的回传,此时用history.go(-1)就回不到A页面了. 解决的方法:我们要想办法记录到页面回传的次数N,然后用history.go(-n),就可以回到A页面. 在B页面中放一个控件记录其回传的次数,初始值为1 复制代码 代码如下:   <%@ Page Language="C#" AutoE

js获取当前页面路径示例讲解_javascript技巧

设置或获取对象指定的"文件名"或路径.<script>alert(window.location.pathname)</script> 设置或获取整个 URL 为字符串.<script>alert(window.location.href); </script> 设置或获取与 URL 关联的端口号码.<script>alert(window.location.port)</script> 设置或获取 URL 的协议

通过伪协议解决父页面与iframe页面通信的问题_javascript技巧

我们经常会有父页面与iframe页面的操作,比如 <iframe id = "iframe"></iframe> 这个iframe里面的内容是js写的.如以下代码 var iframe = document.getElementById("iframe"), doc = iframe.contentWindow.document; doc.open(); doc.write("---------something------&quo

分享经典的JavaScript开发技巧_javascript技巧

JavaScript开发经典技巧分享给大家: 1.首次为变量赋值时务必使用var关键字 变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量.2.使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型.但===和!==不会,它们会同时比较值和数据类型,这也使得它们要比==和!=快.[10] === 10    // is false [10]  == 10    // is true '10' == 10     // is true '10' === 1