브라우저 저장소 정리(feat.WebStorage와 Cookie)

브라우저 저장소의 종류는 크게 Cookie와 WebStorage로 나눠지고 Webstorage는 localStorage와 sessionStorage로 이루어져 있다.

cookie란?

• cookie를 설정하면 이후 모든 요청은 쿠키정보를 포함하여 서버로 전송된다. => 불필요한 트래픽을 발생시킬 수 있다..!

  사용자가 따로 요청하지 않아도 브라우저가 Request시에 Request Header를 넣어 자동으로 서버에 전송

• 용량에 제한이 있고, 만료 기간을 가지며 일정 시간이 지나면 만료된다.

• 주로 서버에 HTTP 요청 시 헤더에 같이 집어 넣어 사용된다.

• 응답 헤더의 Set-Cookie에 담아 Key-Value 쌍의 Text 형식으로 데이터를 저장한다.

Cookie의 가장 큰 단점인 서버로 매번 전송을 하는 점, 그리고 용량 제한에 대한 단점을 극복하여 나타난게 WebStorage이다.

---

WebStorage

• LocalStaore와 SessionStorage가 존재한다.
• WebStorage는 key-value쌍의 구조로 데이터를 저장하고 key기반으로 데이터를 조회할 수 있다.

localStorage

프론트 개인프로젝트를 하면서 가장 많이 사용한 브라우저 저장소가 아닐까 싶다 🙂

• 브라우저가 닫히는 등 세션이 만료되어도 그대로 저장되어 남아있는 특징을 가지고 있다.
• 저장한 데이터를 지우지 않는 한 영구적으로 데이터가 남아있다라는 것!

SessionStorage

• localStorage와 다르게 브라우저가 닫히는 등 세션이 만료되면 저장되어있는 정보가 사라지는 특징을 가지고 있다.

---

✨요약!!

• 브라우저 저장소로는 Cookie와 WebStorage기 있다.
• Cookie는 매번 사용자가 설정하지 않아도 매번 서버로 전송되며 용량에 제한이 있다.
• 이러한 단점을 보완하여 나온 것이 WebStorage이다.
• WebStorage는 LocalStorage와 SessionStorage가 있다.
• LocalStorage는 저장한 데이터를 지우지 않는 한 영구적으로 보관이 가능하다. 브라우저가 닫히는 등 세션이 만료되어도 정보가 남아있음!
• SessionStorage는 브라우저가 닫히는 등 세션이 닫히면 정보가 사라진다.