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

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

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

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

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

쿠키

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

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

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

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

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

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

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

로컬스토리지

로컬스토리지는 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