Application panel
해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 기능
키/값 쌍으로 데이터를 저장
영구저장소(LocalStorage)와 임시저장소(SessionStorage)
서버 전송이 없다.
저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 이루어 지지 않는다. 이는 네트워크 트래픽 비용을 줄여준다.
단순 문자열을 넘어 객체정보를 저장할 수 있다.
문자열 기반 데이터 이외에 체계적으로 구조화된 객체를 저장할 수 있는 점은 개발편의성을 제공해주는 주요한 장점이다. 단, 브라우저의 지원 여부를 확인해 봐야 하는 항목이다.
용량의 제한이 없다.
영구 데이터 저장이 가능하다.
만료 기간의 설정이 없다. 즉, 한번 저장한 데이터는 영구적으로 존재한다.
쿠키와 Web Storage 모두 브라우저에 저장되지만 쿠키는 아래와 같은 단점이 있다. 쿠키의 단점을 Web Storage를 사용함으로써 극복할 수 있다.
4KB의 데이터 저장 제한
HTTP Request에 암호화 되지 않은 상태로 사용하기 때문에 보안이 취약하다.
쿠키는 모든 HTTP Request에 포함되어 있어 웹서비스 성능에 영향을 줄 수 있다.
Storage: 브라우저의 저장소
Local Storage: 로컬스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있다. 즉, 데이터의 영구성이 보장된다. Key-Value 페어의 객체 형태로 데이터 저장.
Session Storage: 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다. Key-Value 페어의 객체 형태로 데이터 저장.
Cookie: 시간 제한 설정 가능. 쿠키는 프론트-백엔드 통신과 관련이 있음 >> 용량이 작을 수 밖에 없음. Key-Value 페어의 문자열 형태로 데이터 저장(세미콜론으로 구분). 텍스트 타입이라 문자열만 저장.
Local Storage
Session Storage
Cookie
회사의 방침에 따라 user data 처리여부 달라진다.
(비밀번호와 같은 중요정보 스토리지에 저장 금지)
데이터 저장
localStorage.setItem("key", "value")
sessionStorage.setItem("key", "value")
setcookie("key", "value", "지속시간 (초단위)")
데이터 호출
localStorage.getItem("key")
sessionStorage.getItem("key")
document.cookie
기타 메소드
외에도 removeItem, clear 등등의 공통 메소드 존재