[JavaScript] 객체 - 7️⃣ history 객체 & history 객체 함수

728x90

SMALL

1. history 객체

브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체
사용자의 개인 정보를 보호하기 위해 이 객체의 대부분의 기능을 접근 제한

2. history 객체 메서드

back(): 페이지 뒤로 이동
forward(): 페이지 앞으로 이동
go(0): 새로고침, location.reload()와 같은 기능

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>history</title>
</head>
<body>
    <h2>history</h2>
    <script>
        function sendit(){
            location.href= 'https://www.daum.net/'
        }
    </script>
    <button onclick="sendit()">다음 홈페이지</button>
    <button onclick="history.back()">뒤로</button>
    <button onclick="history.forward()">앞으로</button>
    <button onclick="history.go(0)">새로고침</button>

</body>
</html>

▲ location객체 href 메서드를 통해 다음페이지로 이동하는 버튼을 만들고, 누르면 이동이 잘 된다.

▲ 현재 문서에서 다음페이지를 열고 다시 돌아온 후 뒤로 버튼을 누르면 다시 현재 문서로 돌아옴

MDN: History

https://developer.mozilla.org/ko/docs/Web/API/History

History - Web API | MDN

History 인터페이스는 브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 있는 방법을 제공합니다.

developer.mozilla.org

728x90

LIST

'Web > JavaScript' 카테고리의 다른 글

[JavaScript] 객체 - 9️⃣ document 객체 & 문서 객체 모델(DOM) (0)	2023.04.12
[JavaScript] 객체 - 8️⃣ navigator 객체 & geolocation (0)	2023.04.12
[JavaScript] 객체 - 6️⃣Location 객체 & Location객체 함수 (0)	2023.04.12
[JavaScript] 객체 - 4️⃣ Window 객체 & Window 객체 함수, setTimeout(), setInterval(), clearTimeout(), clearInterval() (0)	2023.04.11
[JavaScript] 객체 - 3️⃣Date 객체 & Date 객체 함수 (0)	2023.04.11