브라우저 저장소

웹 스토리지 (Web)

• 로컬 스토리지 (Local Storage) : 영구 저장소
• 세션 스토리지 (Session Storage) : 임시 저장소

HTML5에서 추가된 저장소
키-밸류 key: value 형태로 키와 값을 저장하고 key 를 기반으로 데이터를 조회
저장된 데이터가 클라이언트 단에 존재할 뿐 서버 전송이 없다.

window 객체 안에 들어있고 storage 객체를 상속받기 때문에 메소드가 공통적으로 존재
단순 문자열을 넘어 객체 정보 저장 가능

로컬 스토리지와 세션 스토리지의 차이점 : 데이터의 영구성 , 지속성

로컬 스토리지 (Local Storage)

window.localStorage

a. 로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아있습니다.
b. 지속적으로 필요한 데이터(자동 로그인 등)는 로컬 스토리지에 저장
c. 도메인만 같으면 전역으로 공유 가능

localStorage.setItem(키, 값)
localStorage.getItem(키)
localStorage.removeItem(키)
localStorage.clear()

세션 스토리지 (Local Storage)

window.sessionStorage

a. 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거됩니다.
b. 잠깐 동안 필요한 정보(일회성 로그인 정보라든가)는 세션 스토리지에 저장
c. 같은 사이트, 같은 도메인이라 할지라도 브라우저가 다르면 각각 별개의 영역이 되어 서로 침범하지 못한다. (브라우저 컨텍스트가 다르기 때문)

객체는 제대로 저장되지 않고 toString 메소드가 호출된 형태로 저장됩니다. ( [object 생성자]형 )

객체를 저장하는 2가지 방법

1. 키-값 형식으로 풀어서 여러 개를 저장
2. 한 번에 한 객체를 통째로 저장하려면 JSON.stringify 를 해야됩니다. 객체 형식 그대로 문자열로 변환하는 거죠. 받을 때는 JSON.parse

localStorage.setItem('object', JSON.stringify({ a: 'b' }));
JSON.parse(localStorage.getItem('object')); // { a: 'b' }

쿠키 (Cookie)

로컬 스토리지랑 세션 스토리지가 나오기 이전에 브라우저에 저장소 역할
만료 기한이 있는 키-값 저장소
document.cookie
문자열만 저장 가능
쿠키는 4kb 용량 제한이 있고, 매 서버 요청마다 서버로 쿠키가 같이 전송됩니다.

서버에 쿠키가 전송되는 이유

• HTTP 요청은 상태를 가지고 있지 않다.
• 브라우저에서 서버로 나에 대한 정보를 가져오라는 GET /me라는 요청을 보낼 때,
  서버는 요청 자체만으로는 그 요청이 누구에게서 오는 지 알 수 없다.
• 그래서 응답을 보낼 수가 없다.
• 쿠키에 나에 대한 정보를 담아서 서버로 보내면 서버는 쿠키를 읽어서 내가 누군지 파악
• 쿠키는 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어졌기 때문에 서버로 계속 전송

쿠키의 문제 : 데이터 낭비

• 4kb 용량 제한을 거의 다 채운 쿠키가 있다면, 요청을 할 때마다 기본 4kb의 데이터를 사용
• 바로 그런 데이터들을 이제 로컬 스토리지와 세션 스토리지에 저장할 수 있습니다.
  이 두 저장소의 데이터는 서버로 자동 전송되지 않습니다.

참조 링크
로컬스토리지, 세션스토리지 | ZeroCho Blog
브라우저 저장소 | ga_Y0u&G velog
브라우저 저장소 | EJlog velog