JavaScript를 사용하여 브라우저 URL 주소 bar_javascript 기술의 구현 코드를 수정합니다.

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

코드 복사 코드는 다음과 같습니다.

var stateObject = {};
var 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 = "와우 제목 " i;
var newUrl = "/my/awesome/url/" i;
역사. pushState(stateObject ,title,newUrl);
}

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

코드 복사 코드는 다음과 같습니다.

for(i=0;i<5 ;i ) {
var stateObject = {id: i};
var title = "와우 제목 " i;
var newUrl = "/my/awesome/url/" i;
역사. pushState(stateObject ,title,newUrl);
경고(i);
}

window.addEventListener('popstate', function(event) {
readState(event.state);
});

function readState(data){
Alert(data.id);
}

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

영문 원문: http://hasin.me/2013/10/16/maniplating-url-using-javascript-without-freshing-the-page/