JS/jQuery - 새로 고침 시, 뒤로 가기 시, 페이지 이동 시 위치 기억하기 : history, sessionStorage

닌니디자인 JS 썸네일

history

브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 있는 기능을 제공한다. 즉, 사용자가 방문한 페이지의 기록을 통해 앞뒤로 이동하거나, 현재 기록을 변경하거나 추가할 수 있다.

//새로 고침 시 항상 top:0 위치.
history.scrollRestoration = "manual";

//default
//현재 위치를 기억하여 새로 고침 시 그 자리를 유지.
history.scrollRestoration = "auto";

 

 

 

---

 

sessionStorage

브라우저 세션 동안 데이터를 저장할 수 있는 객체. 브라우저가 열려있는 한 새로고침과 페이지 복구를 거쳐도 남아있다. sessionStorage는 localStorage와 비슷하지만, localStorage의 데이터는 만료되지 않고, sessionStorage의 데이터는 페이지 세션이 끝날 때 제거되는 차이가 있다.

 // 스크롤이 움직일때마다 값을 sessionStorage에 저장
let scrollTop = 0;
window.addEventListener("scroll", function() {
    scrollTop = window.scrollY;
    sessionStorage.setItem("scrollY", scrollTop);
});


// 스크롤 위치 지정
window.addEventListener('DOMContentLoaded', function() {
    const scrollY = parseInt(sessionStorage.getItem("scrollY"));
    if(scrollY && scrollY > 0){
        window.scrollTo(0, scrollY);
    }
});

 

 

// 뒤로 가기 시
if(window.performance && performance.getEntriesByType("navigation")[0].type === 'back_forward') {
    // 이벤트 입력
    const scrollY = parseInt(sessionStorage.getItem("scrollY"));
    if(scrollY && scrollY > 0){
        window.scrollTo(0, scrollY);
    }
}

// 페이지 이동 시
if(performance.getEntriesByType("navigation")[0].type === 'navigate') {
    // 이벤트 입력
    const scrollY = parseInt(sessionStorage.getItem("scrollY"));
    if(scrollY && scrollY > 0){
        window.scrollTo(0, scrollY);
    }
}

// 새로 고침 시
if(performance.getEntriesByType("navigation")[0].type === 'reload') {
    // 이벤트 입력
    const scrollY = parseInt(sessionStorage.getItem("scrollY"));
    if(scrollY && scrollY > 0){
        window.scrollTo(0, scrollY);
    }
}