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

🤔 브라우저 저장소 분류 

웹 스토리지(Web Storage)

: HTML5에 추가된 웹 데이터를 클라이언트에 저장하기 위해 만들어진 key-value형식의 저장소이다.

1) 로컬 스토리지(Local Storage) - 영구성 

: window.localStorage에 위치 

: 브라우저를 종료해도 데이터를 보관한다.

=> 지속적으로 필요한 데이터 저장. 

: 동일한 도메인일 경우 전역으로 공유된다. 

:  문자열, 불린, 숫자, null, undefined 등으로 저장할 수 있지만, 모두 문자열로 반환한다. 

 

== 로컬 스토리지에 저장 == 
localStorage.setItem('name', 'hyewon');
localStorage.setItem('birth', 1995);

== 로컬 스토리지에서 키로 조회 == 
localStorage.getItem('name'); // hyewon
localStorage.getItem('birth'); // 1995 (문자열)

== 해당 키 삭제 == 
localStorage.removeItem('birth');

== 전체 삭제 == 
localStorage.clear();

2) 세션 스토리지(Session Storage) - 비영구성

: : window.sessionStorage에 위치 

: 브라우저가 종료되면 데이터가 삭제된다.

=> 잠깐 동안만 사용할 데이터 저장.

: 도메인이 같거라도 브라우저가 다르면 각각의 세션 스토리지가 형성되어 데이터가 공유되지 않는다.

 

== 세션 스토리지에 저장 == 
sessionStorage.setItem('name', 'hyewon');
sessionStorage.setItem('birth', 1995);

== 세션 스토리지에서 키로 조회 == 
sessionStorage.getItem('name'); // hyewon
sessionStorage.getItem('birth'); // 1995 (문자열)

== 해당 키 삭제 == 
sessionStorage.removeItem('birth');

== 전체 삭제 == 
sessionStorage.clear();

 

쿠키(Cookie)

: 서버와 클라이언트 간의 지속적인 데이터 교횐을 위해 만들어진 key-value형식의 저장소이다.

: 클라이언트에서 쿠키에 정보를 담아서 서버에 보내면 서버는 요청 자체만으로 보낸이를 알 수있다. 

: 쿠키는 4KB의 용량 제한을 가지고 있으며, 한 사이트당 20개의 쿠키를 가질 수 있다. 

: 만료기간을 지정할 수 있다.

쿠키의 목적

- 세션관리 : 서버가 알아야될 정보(로그인 및 사용자 정보, 접속시간)

- 개인화 : 사용자에 맞는 페이지 제공

- 트래킹 : 사용자 행동 및 패턴 분석 

 

 

 

참조 

https://ryuhojin.tistory.com/10

브라우저 저장소( 로컬 스토리지, 세션 스토리지, 쿠키 )

https://overcome-the-limits.tistory.com/505

[Web] 로컬 스토리지와 세션 스토리지