브라우저의 저장소는 웹 애플리케이션에서 특정한 정보를 클라이언트단에서 영구적으로 저장하려고 할때 사용할 수 있는 유용한 도구이다.

• 브라우저 저장소를 사용하여 구현되는 대표적인 기능들
  • 쇼핑몰 장바구니
  • 광고 팝업 1주일동안 안보기
  • 로그인 유지하기
  • 인증용 토큰 저장

Local Stroage

• 사용자가 브라우저를 닫아도 영구적으로 데이터를 저장할 수 있다.
  • 개발자의 코드 혹은 개발자 도구를 사용한 지우기 방법을 사용하지 않으면 데이터가 절대 안지워진다.
• 5MB 용량을 가진다.
• 키(Key)와 값(Value) 구조로 데이터가 구성된다.

localStorage.setItem('name', '권용빈');

const name = localStorage.getItem('name');

console.log(name); // 권용빈

localStorage.removeItem('name'); // 특정 아이템 삭제

localStorage.clear(); // 로컬스토리지 전체 삭제

Session Storage

• 사용자가 브라우저를 닫기전까지 데이터를 저장할 수 있다.
• 5MB 용량을 가진다.
• 키(Key)와 값(Value) 구조로 데이터가 구성된다.

sessionStorage.setItem('schoolName', '경북소프트웨어고등학교');

const schoolName = sessionStorage.getItem('schoolName');

console.log(schoolName); // 경북소프트웨어고등학교

sessionStorage.removeItem('schoolName'); // 특정 아이템 삭제

sessionStorage.clear(); // 세션스토리지 

Cookie

• 쿠키(Cookie)는 브라우저 저장소로 사용할 수 있는 대표적인 저장소이다.
• 키(Key)와 값(Value) 구조로 데이터가 구성된다.

장점

• 만료 시간(자동으로 삭제되는 시간)을 지정할 수 있다.
• 특정 도메인에서 공용으로 사용가능하도록 지정할 수 있다.
  • naver.com 에서 로그인하면 news.naver.com, blog.naver.com에서 로그인 상태가 동기화 되는 이유가 바로 도메인별 쿠키를 사용한 구현이다.

단점