Web Storage

Web Storage
LocalStorage, SessionStorage 기본 구성
- 키(key)와 값(value)을 하나의 세트로 저장
- 도메인과 브라우저별로 저장
- 값은 문자열로 저장됨

공통 메소드와 프로퍼티

Web Storage - localStorage
WebStorage API : LocalStorage
- 데이터를 사용자 로컬에 보존하는 방식
- 데이터를 저장, 덮어쓰기, 삭제 등 조작 가능
- 자바스크립트(JavaScript)로만 조작
- 모바일에서도 사용 가능

Cookie와의 차이점
- 유효 기간이 없고 영구적으로 이용 가능
- 단순 문자열외에 (스크립트)객체 정보 저장 가능
- 용량제한이 없음 (쿠키는 도메인당 20개의 쿠키수가 제한되며 4KB까지, 브라우저에 따라 다를 수 있음)
- 쿠키(매번 서버로 전송)와는 다르게 네트워크 요청 시 서버로 전송되지 않음
- 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없음
- 웹스토리지는 origin(프로토콜, 도메인, 포트)이 다르면 접근 불가

Web Storage - sessionStorage
SessionStorage는 현재 떠 있는 탭에서만 유지 (같은 페이지라도 탭이 다르면 다른 곳에 저장)
페이지 새로고침시에는 데이터는 유지, 탭을 닫고 새로 열었을 경우 제거
SessionStorage 사용법
- 세션 저장 : sessionStorage.setItem(”key”, value);
- 특정 세션 값 불러오기 : sessionStorage.getItem(”key”);
- 특정 세션 값 삭제 : sessionStorage.removeItem(”key”);
- 세션 전체 삭제 : sessionStorage.clear();

Web Storage - localStorage vs sessionStorage
차이점
- localStorage는 저장한 데이터를 지우지 않는 이상 영구적으로 보관이 가능. 즉, 세션이 끊겨도 사용 가능
- sessionStorage는 브라우저가 종료되면 데이터도 같이 삭제됨. 즉, 같은 세션만 사용 가능
sessionStorage의 경우에는 동일한 세션에서만 사용 가능하지만 localStorage는 세션이 끊기거나 동일한 세션이 아니더라도 사용 가능
- localStorage는 도메인만 같으면 전역적으로 공유 가능
- sessionStorage는 같은 사이트의 같은 도메인이라도 브라우저가 다르면 서로 다른 영역으로 인식