Web Storage - JavaScript

Web Storage - localStorage

• 데이터를 사용자 로컬에 보존
• 데이터 저장, 덮어쓰기, 삭제 등의 조작 가능
• JavaScript로만 조작
• 모바일에서도 사용 가능

Cookie와의 차이점

• 유효 기간 X 영구적 사용
• 5MB까지 사용 가능(쿠키는 4KB까지)
• 쿠키와는 다르게 네트워크 요청 시 서버로 전송 X
• 서버가 HTTP 헤더를 통해 스토리지 객체를 조작 불가능
• WebStorage는 origin(프로토콜, 도메인, 포트)가 다르면 접근이 불가능

구성

• 키(Key)와 값(Value)을 하나의 세트로 저장
• 도메인과 브라우저별로 저장
• 값은 반드시 문자열로 저장된다.

메서드와 프로퍼티

• setItem(key, value) : key-value를 쌍응로 저장
• getItem(key) : key에 해당하는 값 리턴
• removeItem(key) : key에 해당하는 값 삭제
• clear() : 모든 값 삭제
• key(index) : index에 해당하는 key
• length : 저장된 항목의 개수

Web Storage - sessionStorage

• SessionStorage는 현재 떠있는 탭에서만 유지
• 페이지 새로고침 시 데이터는 유지, 탭을 닫고 새로 열었을 때는 제거
  
  
• 세션 저장 : sessionStorage.setItem("key", value);
• 특정 세션 값 불러오기 : sessionStorage.getItem("key");
• 특정세션 삭제 : sessionStorage.removeItem("key");
• 세션 전체 삭제 : sessionStorage.clear();

Web Storage - localStorage vs sessionStorage

• localStorage - 세션이 끊겨도 사용 가능
• sessionStorage - 같은 세션만 사용 가능