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

web 스토리지의 개념과 사용법

- 웹 스토리지 객체인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해준다.

 

1.쿠키 

• 서버가 사용자의 웹브라우저에 전송하는 작은 데이터 조각
• 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로사용된다,
  -> 사용자의 로그인 상태유지 가능 / 상태가 없는 http프로토콜에서 상태 정보를 기억시켜주기 때문이다.  
• 브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버에 접속할 때마다 쿠키 내용을 헤더에 넣어서 전달
  1. 사용자가 로그인하면 서버는 http 응답 헤더의 set-cookie에 담긴 세션식별자 정보를 사용해 쿠키 설정한다.
  2. 사용자가 동일 도메인에 접속하려고 하면 브라우저는 http cookie 헤더에 인증 정보가 담긴 고유값 을 함께 실어 서버에 요청을 보낸다. 
  3. 서버는 브라우저가 보낸 요청 헤더의 세션 식별자를 읽어 사용자를 식별한다. 
• 쿠키에 수명을 지정할 수 있다. 

2. sessionStorage

• 각각의 출처에 대해 독립적인 저장 공간을 페이지 세션이 유지 되는 동안 (브라우저가 열려있는 동안)  제공합니다. 
• 세션에 한정해 브라우저 또는 탭이 닫힐 때 까지만 데이터를 저장합니다.
• 데이터를 절대 서버로 전송하지 않는다. 
• 저장공간이 쿠키보다 크다.(최대 5mb)
• window.sessionStorage 속성을 통해 사용 

3. localStorage

• 브라우저를 닫았다 열어도 데이터가 남아있다.
• 유효기간 없이 데이터를 저장하고 javaScript를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 사라진다.
• 저장공간이 셋 중 제일 크다.  
• window.localStorage 속성을 통해 사용

두 속성 중 하나에 접근하면 storage객체의 인스턴스를 생성하게 되고  그걸 사용해 데이터 항목을 추가, 회수, 제거 가능

sessionStorage 와 localStorage 의 Storage객체는 각각의 출처별로 다른 것을 사용하며 서로 독립적으로 기능

 

4. 쿠키와 webStorage의 차이

• 쿠키와 다르게 webStorage 객체는 네트워크 요청시 서버로 전송되지 않는다. 
  -> 쿠키보다 더 많은 자료를 보관
• 개발자가 브라우저 내  webStorage 구성 방식을 설정할 수 있다.
• 쿠키와 다르게 서버가 http 헤더를 통해 스토리지 객체를조작할 수 없다. 
  -> webStorage 객체 조작은 모두 자바스크립트 내에서 수행된다,
• webStorage객체는 도메인, 프로토콜, 포트로 정의되는 origin에 묶여있어 프로토콜과 서브도메인이 다르면 데이터에 접근할 수 없다.