[Javascript] 브라우저 저장소란?

 

Storage

---

html5부터 제공하는 기능으로 특정 데이터를 서버가 아니라 클라이언트 웹 브라우저에 저장할 수 있도록 제공하는 기능입니다. localStorage 와 session storage 두가지가 있고 key value 쌍으로 데이터를 저장합니다.

 

 

Cookie와 브라우저 Storage 차이점

---

쿠키와 브라우저 storage는 둘다 웹에 저장이 가능합니다. 하지만 다른점들이 있는데요.

 

1. 쿠키는 4kb의 데이터 저장 제한이 있지만, 웹 브라우저는 용량의 제한이 없습니다.
2. 쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request할때 Request Header를 자동으로 넣어 서버에 데이터를 전송하지만, 브라우저 storage는 클라이언트에 존재할 뿐 서버로 따로 전송되지는 않습니다. 서버로 따로 전송하지 않아 트래픽 비용을 줄일 수 있고, 자즌 통신으로 인해 보안에도 취약합니다.
3. 또한 storage는 브라우저에 한번 저장하면 삭제하기 전까지 무기한으로 저장이 가능합니다.

 

LocalStorage 과 SessionStorage

---

LocalStorage

  - 도메인 별로 데이터를 저장할 수 있습니다.

  - 창을 닫고 다시 도메인에 접속해도 데이터는 유지 됩니다.

  - 도메인만 같다면 local전역에 통일한 데이터가 존제합니다. ex) example.com/main , example.com/profile ...

 

SessionStorage

  - 브라우저 창을 닫지 않는 이상session storage에 저장되어 있습니다. 새로고침을 해도 그대로 저장되어 있지만 창을 닫는 순간 데이터가 삭제가 됩니다.

  - 같은 브라우저라 하더라도 다른 영역에서 저장되어있다면 공유하지 session storage의 값을 공유하지 않고 생성한 브라우저 안에서만 데이터 값이 존재합니다.