[자바스크립트] 히스토리 (history) 객체 사용 방법

JavaScript에서 history 객체는 브라우저 창에서 사용자가 방문한 모든 URL의 목록을 포함하고, 이를 통해 이전 페이지로 이동하거나 다음 페이지로 이동하거나, 특정 페이지로 이동하는 등의 기능을 제공합니다.

1. 개념

 

history 객체는 window 객체의 속성 중 하나이며, 사용자의 브라우저 세션 동안 유지됩니다. history 객체는 사용자가 방문한 페이지를 브라우저 기록에서 추적하고, 각 페이지의 URL, 타이틀, 방문 시간 등과 같은 정보를 유지합니다.

history 객체는 다양한 메서드와 속성을 제공합니다. 일반적으로 사용되는 메서드로는 go(), back(), forward()가 있습니다. go() 메서드는 사용자가 방문한 목록에서 특정 위치로 이동하는 데 사용되며, 음수 값을 인수로 전달하면 이전 페이지로 이동하고 양수 값을 전달하면 다음 페이지로 이동합니다. back() 메서드는 사용자의 브라우저 기록에서 이전 페이지로 이동하고, forward() 메서드는 이전 페이지로 이동한 다음에 사용자의 브라우저 기록에서 다음 페이지로 이동합니다.

또한, history 객체는 length 속성을 포함하며, 현재 사용자가 방문한 페이지의 수를 반환합니다.

history 객체는 사용자의 브라우저 히스토리와 관련된 작업을 처리하는 데 유용합니다. 예를 들어, 이전 페이지로 이동하거나 다른 페이지로 이동하거나, 방문한 페이지의 수를 파악하거나, 브라우저 히스토리를 조작하거나, 뒤로/앞으로 버튼을 클릭하는 것과 같은 작업을 처리할 때 사용됩니다.

2. 예제 코드

 

1. go() 함수

// 현재 페이지에서 2번째 페이지로 이동
history.go(2);

// 현재 페이지에서 이전 페이지로 이동
history.go(-1);

// 현재 페이지에서 다음 페이지로 이동
history.go(1);

 

2. back() 함수

// 현재 페이지에서 이전 페이지로 이동
history.back();

 

3. forward() 함수

// 현재 페이지에서 다음 페이지로 이동
history.forward();

4. length 속성

// 방문한 페이지 수 출력
console.log(history.length);

5. pushState() 함수

// 현재 페이지의 URL을 변경하고 상태를 푸시
history.pushState({page: 1}, "title 1", "?page=1");

// 현재 페이지의 URL을 변경하고 상태를 푸시 (URL만 변경)
history.pushState(null, "", "?page=2");

 

6. replaceState() 함수

// 현재 페이지의 URL을 변경하고 상태를 교체
history.replaceState({page: 3}, "title 3", "?page=3");

// 현재 페이지의 URL을 변경하고 상태를 교체 (URL만 변경)
history.replaceState(null, "", "?page=4");