쿠키, 로컬스토리지와 세션스토리지 - JavaScript

JavaScript

Cookies & Local Storage & Session Storage JavaScript

---

브라우저 안에서 데이터를 저장하는 3가지 방법이 있다. 각 Storage들의 차이점에 대해서 정리해보고자 한다.

 

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

각 Storage의 특징

Cookies

• 4kb의 용량을 가지고 있다
• Expire Date를 지정할 수 있다.
• 브라우저뿐만 아니라 서버와도 통신이 가능하다

Local Storage

• 10mb의 용량을 저장할 수 있다.
• 인터넷 기록을 삭제하거나 직접 지우지 않는다면 기록이 삭제되지 않는다.

Session Storage

• 5mb의 용량을 저장할 수 있다.
• 현재 탭에서만 내용을 저장한다.
• 브라우저를 종료하면 기록은 사라진다.

---

확인하는 법

브라우저(크롬)의 개발 툴을 열어 Application 탭을 열면 각 Storage가 표시되는 것을 볼 수 있다.

 

Storage 확인법

 

로컬 스토리지와 세션 스토리지의 사용 방법은 거의 비슷하지만 쿠키는 다른 방식으로 사용해야 한다.

또한 로컬 스토리지와 세션 스토리지를 통해 JSON 파일도 저장하고 사용할 수 있어 실효성이 크다.

 

각 사용법에 관한 내용은 다른 개발 블로그에 잘 소개되어있으니 그 내용을 참조하시길 바랍니다.

 

참고한 내용

https://youtu.be/GihQAC1I39Q