Web Storage ( feat. Cookie )

Web Storage란 데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 기능

쿠키와 비슷한 기능이며 Web Storage는 key/value 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 가져오는 패턴

Local Stroage(영구저장소), Session Storage(임시저장소) 두 개로 나누어 데이터의 지속성을 구분하여 환경에 맞게 선택하여 활용

Web Storage

• 저장된 데이터가 클라이언트에 존재해서 서버를 이용할 필요가 없기 때문에 네트워크 트래픽 비용을 줄여 줌.

• 문자열 기반 데이터 이외에 구조화된 객체를 저장할 수 있음

• 용량 제한이 없음

• 영구 데이터 저장 가능

Local Storage

• 브라우저를 닫았다가 다시 열어도 유지, 저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관
• 도메인마다 별로도 LocalStorage가 기본적으로 생성
• 도메인만 같으면 전역으로 공유 가능
• Windows 전역 객체의 LocalStorage라는 컬렉션을 통해 저장과 조회

Session Storage

• 브라우저가 열려있는 한 계속 유지, 브라우저를 닫으면 삭제
• Windows 전역 객체의 SessionStorage라는 컬렉션을 통해 저장과 조회
• 데이터의 지속성과 액세스 범위에 특수한 제한이 존재
• 같은 사이트의 같은 도메인이라도 브라우저가 다르면 서로 다른 영역

Cookie

사이트에서 로그인 시 아이디와 비밀번호를 저장하겠냐는 문구나 팝업 창에서 오늘 더 이상 이 창을 보지 않음 등 다음 방문 시 적용될 기능들을 보통 쿠키로 기록하여 서비스를 제공함.

특징

• 쿠키는 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일.
• 300개 까지 쿠키를 저장 가능하며 하나의 도메인 당 20개의 값만 가질 수 있음.
• 유효한 시간을 정할 수 있으면 유효 시간이 남았다면 브라우저가 종료 되어도 인증이 유지 됨.
• 쿠키에 이름, 값, 유효시간, 보안 강화, 도메인, 경로 등 추가 옵션 사항들을 적용 가능