브라우저에서 URL 저장소의 JavaScript 구현_기본 지식

현재 브라우저에는 탐색 과정에서 페이지를 새로 고치지 않고도 브라우저 URL을 수정할 수 있으며, 탐색 기록을 저장하고 브라우저를 클릭하면 뒤로를 클릭할 수 있습니다. 검색 기록을 찾아 롤백 정보를 얻을 수 있습니다. 이는 복잡해 보이지 않으며 몇 가지 코드를 작성해 보겠습니다. 그것이 어떻게 작동하는지 봅시다.

var stateObject = {};
var title = "Wow Title";
var newUrl = "/my/awesome/url";
history.pushState(stateObject,title,newUrl);

History 객체 pushState() 이 메소드에는 위의 예에서 볼 수 있듯이 3개의 매개변수가 있습니다. 첫 번째 매개변수는 현재 URL에 대한 기록 정보를 저장하는 Json 객체입니다. 두 번째 매개변수인 title은 문서 제목을 전달하는 데 사용되며, 세 번째 매개변수는 새 URL을 전달하는 데 사용됩니다. 브라우저의 주소 표시줄은 변경되지만 현재 페이지는 새로 고쳐지지 않습니다.

각 개별 URL에 임의의 데이터를 저장하는 예를 살펴보겠습니다.

for(i=0;i<5;i++){
 var stateObject = {id: i};
 var title = "Wow Title "+i;
 var newUrl = "/my/awesome/url/"+i;
 history.pushState(stateObject,title,newUrl);
}

지금 실행하고 브라우저의 뒤로 버튼을 클릭하여 URL이 어떻게 변경되는지 확인하세요. 각 URL 변경에 대해 기록 상태 "id"와 해당 값을 저장합니다. 하지만 우리는 어떻게 역사적 상태를 되찾고 그것에 기초하여 무언가를 할 수 있을까요? 히스토리 객체의 상태가 변경될 때마다 트리거되는 "popstate"에 이벤트 리스너를 추가해야 합니다.

for(i=0;i<5;i++){
 var stateObject = {id: i};
 var title = "Wow Title "+i;
 var newUrl = "/my/awesome/url/"+i;
 history.pushState(stateObject,title,newUrl);
 alert(i);
}
 
window.addEventListener('popstate', function(event) {
 readState(event.state);
});
 
function readState(data){
 alert(data.id);
}

이제 뒤로 버튼을 클릭할 때마다 "popstate" 이벤트가 실행되는 것을 볼 수 있습니다. 그런 다음 이벤트 리스너는 기록 상태 개체와 연결된 URL을 검색하고 "id" 값을 묻는 메시지를 표시합니다.

아주 간단하고 재미있죠?