[Web Storage] 💾LocalStorage, SesstionStorage 그리고 🍪Cookie까지

저는 요즘 프로젝트를 진행하면서 저장소(LocalStorage와 SessionStorage)를 제대로 활용하지 못하고 있다는 생각이 들었습니다. 그래서 조금 더 깊이 이해하고자 이렇게 글을 쓰게 되었습니다. 그리고 쿠키도 비슷한 기능을 가지고 있는 것으로 알고 있어 쿠키까지 조사하게 되었습니다.

---

💾 LocalStorage란?

• 데이터를 저장합니다
• 도메인 별로 남아있습니다
• 시간 제한이 없습니다
• 브라우저가 꺼져도 남아있습니다
• 값을 지우려면 직접 삭제해야 합니다

장점

저장된 데이터가 서버로 저장되지 않아서 트래픽을 줄일 수 있습니다

단점

HTML5 미만의 브라우저에서는 지원을 하지 않습니다

---

💾 SesstionStorage란?

• 데이터를 저장합니다
• 브라우저가 종료될 때까지 데이터가 존재합니다
• 세션이 종료되면 없어집니다
• 소멸 타이밍이 존재합니다

장점

저장된 데이터가 서버로 저장되지 않아서 트래픽을 줄일 수 있습니다

단점

HTML5 미만의 브라우저에서는 지원을 하지 않습니다

---

🍪 Cookie란?

• 서버를 통해 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일입니다
• 하나의 사이트에 최대 20개까지 가능하고 4KB가 최대입니다
• 만료일자 지정이 가능합니다

장점

서버에 저장공간을 절약할 수 있습니다

단점

요청마다 쿠키에 대한 정보를 포함해야 하기 때문에 트래픽이 상당히 많이 발생하고 요청할 때 쿠키 값을 그대로 담아 보내기 때문에 보안에 취약합니다

---

LocalStorage VS Cookie (💾 vs 🍪)

• 서버 통신: LocalStorage는 서버와 통신을 하지 않지만 Cookie는 서버와 통신합니다
• 데이터 유효기한: LocalStorage은 무조건 영구적으로 데이터를 보관하지만 Cookie는 유효기간을 따로 정할 수 있습니다
• 데이터 공유: LocalStorage는 도메인이 완전히 같아야 하지만 Cookie는 동일 도메인 내 여러 페이지에서 공유할 수 있습니다

---

SessionStorage VS Cookie (💾 vs 🍪)

• 서버 통신: SessionStorage는 서버와 통신을 하지 않지만 Cookie는 서버와 통신합니다
• 데이터 유효기한: SessionStorage은 브라우저가 종료될 때까지지만 Cookie는 유효기간을 따로 정할 수 있습니다
• 데이터 공유: SessionStorage는 다른 브라우저 탭 또는 창에서는 공유하지 않습니다 Cookie는 여러 페이지에서 공유할 수 있습니다

---

SessionStorage VS LocalStorage (💾 vs 💾)

• 데이터 유효기한: SessionStorage은 브라우저가 종료될 때까지지만 LocalStorage는 영구적입니다
• 데이터 공유: SessionStorage는 다른 브라우저 탭 또는 창에서는 공유하지 않습니다 LocalStorage는 도메인이 완전히 같아야 합니다

---

이렇게 각각 정의와 장단점 차이점을 다뤄보았는데 이제 잘 사용할 생각에 매우 기쁩니다!! 여러분들도 제 글을 읽고 좀 더 잘 사용하게 되셨으면 좋겠습니다