📌 토글 버튼 기능 구현
- 페이지 상단 토글 버튼이 클릭되면 사이드 내비게이션이 토글 되도록 한다.
- 사이드 내비게이션 상태(열려 있는지, 닫혀 있는지)는 다음과 같은 경우 모두 유지되도록 한다.
- 새로고침
- 페이지 이동
- 브라우저를 닫고 다시 켜서 애플리케이션 재시작
사이드 내비게이션 상태는 새로고침이나 재시작을 했을 때에도 유지되어야 하므로, 단순히 변수에 저장해서 관리할 수는 없었다.
내비게이션 상태를 언제 저장하고 언제 읽어 들이는 것이 효율적인지 생각해보았다.
내가 작성한 코드는 아래와 같다.
const rightArrowButton = document.querySelector(".bx-right-arrow-circle");
const toggleNav = document.querySelector("nav");
function onClickArrow () {
document.querySelector('body').classList.remove("preload");
toggleNav.classList.toggle('active');
if(toggleNav.className.includes("active")) {
localStorage.setItem("toggle", "open");
}else {
localStorage.setItem("toggle", "close");
}
}
window.onload = function() {
const toggleValue = localStorage.getItem("toggle");
if(toggleValue === "close") {
toggleNav.classList.remove("active");
}else {
toggleNav.classList.add("active");
}
document.querySelector('body').style.visibility = 'visible';
}
rightArrowButton.addEventListener('click', onClickArrow);localstorage를 사용해서 click event가 일어날 때 마다 브라우저에 key-value값을 storage에 저장하였다.
이렇게 하면 저장한 데이터는 세션간 공유되고, 세션이 바뀌어도 저장한 데이터가 유지되는 것을 확인할 수 있다.
토글 버튼이 close일 경우 localstorage toggle(key값) 의 value는 close이다.
토글 버튼이 open일 경우 localstorage의 value는 open이다.
페이지가 새로고침 됐을 때에도 localstorage의 toggle이 open되어 있는 것을 볼 수 있다.
