[HTML] Local storage VS Session storage VS Cookie

1. Local Storage

setItem("key", "value")
getItem("key")
removeItem("key")
clear()

 

- 단순하고 사용하기 쉬운 key, value 저장소이다.

 

- 기능이 key, value로 한정적이며 string 타입만 지원한다.

 

- 지원 용량이 5mb ~ 10mb 정도이다.

 

- 데이터를 만료기간 없이 계속 저장할 수 있다.

 

 

 

 

2. Session Storage

setItem("key", "value")
getItem("key")
removeItem("key")
clear()

 

- api 사용방법은 local storage와 비슷한다.

 

- 브라우저를 종료하거나, 새 탭을 열면 Session storage는 초기화된다.

 

- 새로고침 시에는 데이터가 유지된다.

 

- 예시) 글 작성하는 에디터에서 자동 임시저장 같은 걸로 사용 가능

 

 

 

 

3. Indexed DB

 

- 대용량 데이터 저장 가능, 기능 많음

 

- 가볍게 사용하기는 힘들다

 

 

 

 

4. Cookie

 

- 4kb로 용량이 적다.

 

- 서버와 데이터를 공유한다.

 

- 데이터 유효기간을 지정할 수 있다.

 

- SSR 이용 시 SSR시점에 local storage는 알 수 없지만  cookie 값은 알 수 있다.

 

 

 

5. 비교

 

	Cookie	Local Storage	Session Storage
생성자	클라이언트/서버	클라이언트	클라이언트
지속시간	설정 여부에 따름	명시적으로 지울때까지	탭 / 윈도우 닫을 때까지
용량	5KB	5MB / 10MB	5MB
서버와의 통신	O	X	X
취약점	XSS / CSRF 공격	XSS 공격	XSS 공격