Web Storage 등장배경

기존의 쿠키에 대한 제약들을 해소하고 조금 더 다양하고 클라이언트에 다양한 기능을 넣고자 HTML5부터 등장하였습니다.
쿠키의 제약

• 4kb의 데이터 저장 제한
• 매 HTTP 요청에 포함되어 웹이 느려지게 하는 원인이 될 수 있음
• 같은 쿠키는 도메인 내의 모든 페이지에 같이 전달
• HTTP 요청에 암호화하지 않고 보내기 때문에 보안에 취약
• 쿠키는 사용자의 로컬에 텍스트로 저장되어있어 쉽게 접근, 내용 확인이 가능

Web Storage

브라우저 저장소란 HTML5부터 제공하는 기능으로, 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹 브라우저에 저장할 수 있도록 하는 기능입니다. 따라서 도메인별로 각기 다른 스토리지가 생성이 됩니다. localStorage와 sessionStorage가 있으며 키/값 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회합니다.

localStorage

• 로컬스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아있습니다. 즉, 데이터의 영구성이 보장이 되지만 이런 영구성으로 인해 중요한 정보는 로컬스토리지에서 취급하지 않아야 합니다.
• 도메인마다 별도의 스토리지가 생성되며. 도메인이 같다면 전역적인 공유 가능
• 저장하면 좋을 데이터
  • 지속적으로 필요한 데이터 ex) 아이디 저장, 비회원 장바구니 등
  • UI 정보들 ex) 에어비앤비, 스카이스캐너 인천공항-베네치아 검색 시 상태유지

// 데이터 저장
localStorage.setItem('key', 'value');
// 키를 통해 데이터를 호출
localStorage.getItem('key');
// 해당 키를 삭제
localStorage.removeItem('image');
// 해당 스토리지에 존재하는 모든 스토리지 객체 항목 삭제
localStorage.clear();

sessionStorage

• 세션스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거됩니다. 따라서 잠깐동안 필요한 정보들을 저장하면 좋습니다.
• 도메인마다 별도로 생성되며 같은 사이트의 도메인일 지라도 브라우저가 다르면 서로 다른 영역
• 저장하면 좋을 데이터
  • 보안이 중요한 정보 ex) 은행사이트 - 유저의 구체적인 정보, 언어 선택 등

// 데이터 저장
sessionStorage.setItem('key', 'value');
// 키를 통해 데이터를 호출
sessionStorage.getItem('key');