브라우저 저장소에 대해 설명

로컬스토리지, 세션스토리지, 쿠키 설명

• 로컬스토리지와 세션스토리지의 차이는 영구성이다

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

• 세션스토리지의 데이터는 윔도우나 브라우저 탭을 닫을 경우 제거 된다

• 지속적으로 필요한 데이너는 로컬 스토리지에 저장하고, 잠깐 동안 필요한 정보는 세션스토리지에 저장한다

• 쿠키는 만료기한이 있는 키-값 저장소다

• 로컬, 세션스토리지는 모두 window 객체 안에 들어 있다

• 도메인 별 용량 제한이 있다

• 모바일은 2.5mb, 데스크탑은 5mb ~ 10 mb 정도 된다

• IndexedDB는 50mb 이다

로컬스토리지

• window.localStorage에 위치한다
• 모두 문자열로 변환되어 저장된다
• localStorage.setItem(키, 값)으로 로컬스토리지에 저장한 후 → localStorage.getItem(키)로 조회하면 된다, localStorage.removeItem(키)하면 해당 키가 지워지고, localStorage.clear()하면 스토리지 전체가 지워 진다
• 객체 저장 방법
  • 각각의 키와 값을 하나하나 저장한다
  • JSON.stringify를 사용하여 저장하고, JSON.parse로 받아온다
    • localStorage.setItem('object', JSON.stringify({ a: 'b' }));
    • JSON.parse(localStorage.getItem('object')); // { a: 'b' }

세션스토리지

• window.sessionStorage에 위치
• 로컬스토리지와는 다르게 데이터가 영구적으로 보관되지는 않을 뿐

쿠키

• 4kb 용량 제한

• 매 서버 요청마다 서버로 쿠키가 같이 전송된다

• HTTP 요청은 무상태성을 갖는다 즉, 브라우저에서 서버로 나에 대한 정보를 가져오기 위해 GET을 통하여 요청을 보낼때, 서버는 요청 자체만으로는 그 요청이 누구에게서 오는지 알 수가 없어서 응답을 보낼 수 없다, 이 때 쿠키에 나에 대한 정보를 담아서 서버로 보내면 서버는 쿠키를 읽어서 내가 누군지 파악한다
  → 쿠키는 처음부터 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만등러 졌기 때문에 서버로 계속 전송 되는거다

• 문제도 있다 4kb의 용량은 다 채운 쿠키가 있다면, 요청 할 때마다 기본 4kb의 데이터를 사용하게 될거다
  이런 데이터 낭비를 줄이기 위해 로컬, 세션 스토리지를 사용한다

• 쿠키는 사이트에서 방문한 페이지를 저장하거나, 유저의 로그인 정보를 저장하는 등 다양하게 사용됨

• 문자열만 저장이 가능

• 로그인을 한 후 쿠키를 사용해 유저의 신원을 확인하여 모든 페이지에서 재인증을 거치지 않아도 되게 된다

• 제한된 인터넷 사용 기록을 기반으로 사용자 경험을 개선하는 것이다

Session cookies
- 만료일을 포함하지 않는다

• 브라우저나 탭이 열려있는 동안에만 저장된다, 브라우저가 닫히면 쿠키는 영구적으로 삭제된다
• 은행 유저들의 자격 증명을 저장하는데 사용될 수 있다

Presistent cookies
- 만료일을 가진다

• 만료일이 지나면 삭제 된다
• 유저들이 방문할때마다 유저 경험을 커스텀하기 위해 특징 웹사이트에서 행동을 기록하는 등 여러 활동들에 사용

로컬스토리지와 쿠키의 차이점

• 만료 조건은 persistent cookies 처럼 동작하지만, 로컬스토리지는 삭제하지 않는이상 지워지지 않는다
• 로컬스토리지는 쿠키와는 달리 HTTP 요청에서 데이터를 주고 받을 필요가 없다
  HTTP 요청에서 데이터를 주고받지 않고 로컬스토리지를 이용하면 클라이언트와 서버간의 전체 트래픽과 낭비되는 대역폭의 양을 줄일 수 있다