페이지 상태를 저장하기 위한 Location.hash 기술_javascript 기술

해시 속성은 URL의 앵커 부분(# 기호로 시작하는 부분)인 읽고 쓸 수 있는 문자열입니다.

문법

위치.해시

저희 프로젝트에는 Ajax 쿼리 폼 + 결과 목록 페이지가 많이 있습니다. 쿼리 결과는 ajax에서 반환되기 때문에 사용자가 목록의 항목을 클릭하여 세부정보 페이지로 들어간 후 다시 브라우저를 클릭하면 됩니다. 버튼을 누르면 Ajax Query 페이지로 돌아가는데, 이때 쿼리 페이지의 형태와 결과가 기본 상태로 돌아갔다는 것은 누구나 알 수 있습니다.

페이지로 돌아올 때마다 쿼리 조건을 다시 입력해야 하거나 목록의 특정 페이지로 이동해야 한다면 사용자는 이 경험에 정말 열광할 것입니다.

저희 프로젝트에서는 페이지 상태를 저장하기 위해 location.hash를 처리하는 매우 간단한 JavaScript 기본 클래스를 작성했습니다.

(이 글의 내용은 클래스 정의, 상속, 가상 메서드, 리플렉션 등 JS 객체 지향 지식을 포함하고 있기 때문에 JavaScript 초보자에게는 다소 어려울 수 있습니다.)

필요 사항을 먼저 살펴보겠습니다

저희 프로젝트는 WeChat 기반의 H5 작업 관리 시스템으로 완성될 페이지의 프로토타입은 아래와 같습니다.

요구사항은 매우 명확해야 합니다. 즉, 쿼리 양식을 클릭하고 Ajax를 사용하여 쿼리 결과를 반환한 다음 목록에서 작업을 클릭하여 작업 세부정보 페이지로 들어갑니다. 관리자(프로젝트 관리자)는 일반적으로 여러 작업을 동시에 처리하기 때문에 작업 세부 정보 페이지와 쿼리 목록 페이지를 계속 전환하게 됩니다. 이때 쿼리 페이지 상태를 Return 키를 눌러 저장할 수 없는 경우에는 매번 쿼리 페이지로 돌아가야 하는 번거로움은 절대 용납할 수 없습니다.

그래서 사용자가 뒤로 버튼을 눌렀을 때 쿼리 조건과 결과가 그대로 유지되도록 페이지 상태를 저장하는 방법을 찾아야 합니다.

솔루션 아이디어

페이지 상태를 저장하는 방법에는 여러 가지가 있지만 location.hash를 사용하는 것이 가장 좋은 방법이라고 생각합니다.

아이디어는 다음과 같습니다.

1. 사용자가 쿼리 조건을 입력하고 확인을 클릭한 후 쿼리 조건을 문자열로 직렬화하고 "#"을 통해 URL 끝에 쿼리 ​​조건을 추가하여 새 URL을 가져온 다음 위치를 호출합니다. 브라우저 주소 표시줄의 주소를 수정하려면 교체(새 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 하위 클래스의 인스턴스를 창에 직렬화하고 업데이트합니다. . 위치.

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 페이지 상태 저장 기술입니다. 모두에게 도움이 되었으면 좋겠습니다!