LocalStorage / SessionStorage / Cookie의 차이점

공통점

• 개발자 도구 > Application > Storage에 들어가면 존재하는 친구들이다.
• 브라우저에 저장하는 거라 새로고침해도 사라지지 않는 특징이 있다.

차이점

localStorage

데이터를 브라우저에 저장하고, 브라우저를 종료한 후 다시 브라우저에 들어와도 저장 기록이 있다.
key / value로 이루어진 데이터 저장

// key값에 value 설정
localStorage.setItem('key', value);

// key값으로 value 불러오기
localStorage.getItem('key');

// key 값에 해당하는 value 삭제
localStorage.removeItem('key');

// 모든 key에 관한 value 삭제
localStorage.claer();

// 저장된 키 / 값의 갯수
localStorage.length;

Session Storage

데이터를 브라우저에 저장하고, 브라우저가 종료될 때 삭제

Cookie

서버와 클라이언트가 지속적인 데이터 교환

• HTTP 쿠키는 서버가 사용자의 웹 브라우저에 전송되는 작은 데이터 조각
• 브라우저는 쿠키를 저장했다가 백엔드 API 요청시, 자동으로 데이터를 함께 전송

쿠키 목적

• 세션 관리 : 서버가 알아야하는 정보 (로그인, 장바구니, 게임 스코어 등)
• 개인화 : 사용자에 맞는 페이지 제공 (테마 세팅)
• 트래킹 : 사용자 행동 / 패턴 분석