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 === '' &#63; '-' : 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保存頁面狀態的技巧，希望對大家有幫助！