history
-브라우저의 기록관리
6번페이지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>06번페이지</h3>
<button onclick = "location.href='index07.html' ">이동</button>
<button onclick="add()">기록강제로 추가하기</button>
<script>
//history는 브라우저의 기록관리(사용자 UX에서 중요하게 동작)
function add() {
history.pushState(null , '' , '변경.html'); //브라우저 history에 새로운 값을 넣어줌
}
</script>
</body>
</html>
07번 페이지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>07번페이지</h2>
<button onclick = "history.back()">뒤로가기</button>
<button onclick="history.go(-2)">뒤로가기(양수를 주면 앞,음수를 주면 뒤로가기)</button>
<!-- -2면 2단계 뒤로가기 -->
</body>
</html>
이동을 누르면
뒤로가기를 누르면
다시 돌아온다.
기록을 강제로 추가하기(pushState)
기록 강제로 추가하기를 누르면
이렇게 주소값 이 변경된다.
뒤로가기 감지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>06번페이지</h3>
<button onclick = "location.href='index07.html' ">이동</button>
<button onclick="add()">기록강제로 추가하기</button>
<script>
//history는 브라우저의 기록관리(사용자 UX에서 중요하게 동작)
function add() {
// history.pushState(null , '' , '변경.html'); //브라우저 history에 새로운 값을 넣어줌
history.replaceState('data','',null);//브라우저의
}
//리플레이스 스테이트로 변경한 값은 state속성에서 찾아 쓸 수 있다.
//console.log(history.state);
//뒤로가기감지
if(history.state != null){
alert("기록이 변경됨. 원본페이지로 돌아갑니다");
location.href = "index01(팝업).html";
}
</script>
</body>
</html>
ex ) 결제 프로세서(결제 중복방지) 등 에서 쓰인다.
'JS > JS-event' 카테고리의 다른 글
| BOM -네비게이터 객체 (0) | 2024.02.05 |
|---|---|
| 노드 삭제 (1) | 2024.02.05 |
| BOM - timeout (0) | 2024.02.05 |
| 요소생성 - 노드생성 및 추가 (0) | 2024.02.05 |
| BOM -인터벌예제 (0) | 2024.02.05 |
