보였다가 안보였다가를 반복되는 사이드 메뉴를 만들어보았다.
버튼을 누를때 마다 화면단이 바꾸게 하기 위해서는
동작이 있을때 마다 class명이 변하는 메소드인 .toggle()를 사용하는게 핵심이다.
변수명.classList.toggle('클래스명')
버튼을 클릭시 nav의 class에 active가 추가되었다가 제거가 된다. 이것이 toggle() 메소드이다./*css code*/ nav.active, nav.active ~ main { transform: translate3d(300px, 0, 0); } nav.active ~ main > .toggle { transform: rotate(180deg); }
- 사이드 내비게이션이 포함된 웹페이지가 애플리케이션 내에 여러 개 존재한다고 가정한다.
- 사이드 내비게이션 상태(열려 있는지, 닫혀 있는지)는 애플리케리션 전역에서 사용되며, 이전의 사이드 내비게이션 상태는 유지되어 모든 웹페이지에서 사용할 수 있어야 한다.
- 사이드 내비게이션 상태는 다음과 같은 경우 모두 유지되어야 한다.
- 새로고침
- 페이지 이동
- 브라우저를 닫고 다시 켜서 애플리케이션 재시작
- 사이드 내비게이션 상태는 새로고침이나 재시작 시에도 유지되어야 하므로 단순히 변수에 저장해 메모리 레벨로 관리할 수 없고 영속적인 저장 방법이 필요하다.
이 조건들을 보고 감을 잡을 수 없었다ㅠㅠㅠ......
자바스크립트 새로고침을 구글링을 해본 결과 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)에 관한 정보가 나왔다.
로컬 스토리지 vs 세션 스토리지
웹 스토리지(web storage)에는 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)가 있다. 이 두 개의 매커니즘의 차이점은 데이터가 어떤 범위 내에서 얼마나 오래 보존되느냐에 있다.
세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워지는 반면에,
로컬 스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않는다.
다시 말해, 브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우면, 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장되며, 각 탭이나 창이 닫힐 때 저장해 둔 데이터도 함께 소멸한다.
반면에, 로컬 스토리지의 경우 여러 탭이나 창 간에 데이터가 서로 공유되며 탭이나 창을 닫아도 데이터는 브라우저에 그대로 남아 있는다.
하지만 로컬 스토리지의 데이터 영속성은 어디까지나 동일한 컴퓨터에서 동일한 브라우저를 사용할 때만 해당된다. (다른 기기나 브라우저 간에 데이터 공유 or 영속이 되는것을 원하면 클라우드 플랫폼이나 데이터베이스 서버를 사용해야한다.)
기본 API
// 키에 데이터 쓰기 localStorage.setItem("key", value); // 키로 부터 데이터 읽기 localStorage.getItem("key"); // 키의 데이터 삭제 localStorage.removeItem("key"); // 모든 키의 데이터 삭제 localStorage.clear(); // 저장된 키/값 쌍의 개수 localStorage.length;주의사항
웹 스토리지를 사용할 때 주의해야 할 부분이 하나 있다. 오직 문자형(string) 데이터 타입만 지원한다는 것이다.
해결방법
JSON 형태로 데이터를 읽고 쓰는 것 이다.localStorage.setItem('json', JSON.stringify({a: 1, b: 2})) //undefined JSON.parse(localStorage.getItem('json')) //{a: 1, b: 2}
