로컬스토리지와 세션스토리지는 HTML5에서 추가된 저장소입니다.

간단한 키와 값을 저장할 수 있는 키-밸류 스토리지 형태입니다.

로컬스토리지와 세션스토리지의 차이점은 데이터의 “영구성”입니다.

로컬스토리지의 데이터는 사용자가 지우지않는 이상 계속 브라우저에 남아있습니다.

하지만 세션스토리지의 데이터는 윈도우나 브라우저탭을 닫을 경우 제거됩니다.

쿠키

이름이 넘나 귀여운 쿠키는 뭘까여..

쿠키는 만료기한이 있는 키-값 저장소입니다.

쿠키는 4kb의 용량 제한이 있습니다.

또한 매 서버 요청마다 서버로 쿠키가 같이 전송됩니다.

브라우저에서 서버로 GET요청을 보낼 때, 서버는 요청 자체만으로는 그 요청이 누구로부터 오는지 파악하지를 못합니다.

이 때 쿠키에 나에대한 정보를 담아서 요청을 보낼때 같이 보내면 서버는 쿠키를 읽어서 내가 누군지 파악합니다!

쿠키는 이런 녀석이죠.. 뭔가 이름처럼 귀엽당..


- 보충 2020.06.17

쿠키란?

쿠키는 서버가 사용자의 웹브라우저에 전송하는 작은 데이터 조각입니다.

브라우저는 이 데이터 조각들을 저장해두었다가, 동일한 서버에 재요청 시 저장된 데이터를 함께 전송합니다.

쿠키는 두 요청이 동일한 브라우저에서 들어왔는지아닌지를 판단할 때 주로 사용하고, 이를 이용하여 사용자의 로그인 상태를 유지할 수 있습니다.

상태가 없는 HTTP 프로토콜에서 상태를 기억시켜줍니다.(..??)

쿠키는 주로 세가지 목적으로 사용됩니다.

  • 세션 관리
    • 서버에 저장해야할 로그인, 장바구니, 게임 스코어등의 정보 관리
  • 개인화
    • 사용자 선호, 테마 등의 세팅
  • 트래킹
    • 사용자의 행동을 기록하고 분석하기위해.

과거 로컬스토리지, 세션스토리지, 인덱스드디비 등이 없었을 땐 단순하게 정보를 저장하기위해서 쿠키를 사용하다곤 합니다.

모든 요청마다 쿠키가 함께 전송되기 때문에 성능이 떨어지는 원인이 되기도 했습니다.

reference

https://developers.google.com/web/tools/chrome-devtools/storage/cookies

로컬스토리지

로컬스토리지는 window.localStorage에 위치합니다.

localStorage.setItem('name', 'junwoo');
localStorage.setItem('age', 100);

localStorage.getItem('name');	// junwoo
localStorage.getItem('age');	// 100 (문자열)

localStorage.removeItem('age');
localStorage.getItem('age');	//null
localStorage.clear();	//전체 삭제
localStorage.setItem('person', { name: 'junwoo'});
localStorage.getItem('person');	//[object Object]

객체는 제대로 저장되지않고 toString메소드가 호출된 형태로 저장됩니다.

객체를 저장하는 방법은 2가지가 있습니다.

  1. 키-값 형식으로 풀어서 여러개를 저장하는 방법
  2. JSON.stringify를 사용해서 객체를 통채로 저장하는 방법
localStorage.setItem('person', JSON.stringify({name: 'junwoo'}));
JSON.parse(localStorage.getItem('person'));	//{name: 'junwoo'}

로컬스토리지는 이렇게 데이터를 지우기 전까지는 계속 저장되어있으므로, 보안에 민감하지않은 사용자설정같은 데이터들을 넣어두면 좋습니다.

세션 스토리지

세션스토리지는 window.sessionStorage에 위치합니다.

로컬스토리지처럼 getItem, setItem, removeItem, clear등 모든 메소드가 같습니다.

단지 차이점은 영구적으로 보관되지않는다는 점이죠!

공부 출처:

https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048