보였다가 안보였다가를 반복되는 사이드 메뉴를 만들어보았다.
버튼을 누를때 마다 화면단이 바꾸게 하기 위해서는
동작이 있을때 마다 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)에 관한 정보가 나왔다.
웹 스토리지(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}