Javascript 기능 실습

1. 페이지를 reload해도 스크롤의 위치가 그대로!

(1) localStorage를 이용한 방법

// 1️⃣ 페이지가 언로드(떠날 때) 될 때 스크롤 위치 저장

window.addEventListener("beforeunload", function () {
  localStorage.setItem("scrollPosition", window.scrollY);
});


// 2️⃣ 페이지가 로드될 때 저장된 위치로 이동

window.addEventListener("load", function () {
  const savedPosition = localStorage.getItem("scrollPosition");
  if (savedPosition !== null) {
    window.scrollTo(0, parseInt(savedPosition));
  }
});

---

localStorage.setItem("scrollPosition", window.scrollY);
: 현재 스크롤 위치를 저장

localStorage.getItem("scrollPosition");
: 저장된 위치를 가져오기

window.scrollTo(0, savedPosition);
: 저장된 위치로 스크롤 이동

beforeunload 이벤트
: 페이지를 떠날 때 실행

load 이벤트
: 페이지가 로드될 때 실행

---

(2) sessionStorage를 이용한 방법

// 1️⃣ 페이지를 떠날 때 현재 스크롤 위치 저장

window.addEventListener("beforeunload", function () {
  sessionStorage.setItem("scrollPosition", window.scrollY);
});


// 2️⃣ 페이지가 로드될 때 저장된 위치로 이동

window.addEventListener("load", function () {
  const savedPosition = sessionStorage.getItem("scrollPosition");
  if (savedPosition !== null) {
    window.scrollTo(0, parseInt(savedPosition));
  }
});

코드는 동일하다. 하지만 localStorage 에 저장된 스크롤 정보는 브라우저를 닫았다가 열어도 유지되지만, sessionStorage 에 저장된 스크롤 정보는 같은 페이지 내에서 새로고침을 하는 경우에만 유효하다.

---