[FE - ConnecTo] DAY53 TIL👩🏻‍💻 (Local Storage, Session Storage, Cookie의 차이가 뭐야..?)

22.09.26 수업 시간 중 공부한 내용들을 정리하였습니다 😊
피드백은 언제나 환영입니다! 🍊

오늘 Pair Programming을 하다 고민을 했던 부분들이 있어서 짝지와 함께 공부했습니다.

제시되어있던 조건은, 영속적인 저장 방법이 필요하다 였는데, Local Storage, Session Storage, Cookie 중, 어떤 것을 사용해야할지 고민을 했고, 이들의 차이점을 정리해보기로 했습니다. 🤔

---

Web Storage

Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이며,
영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능합니다.

Web Storage는 기존 웹 환경의 쿠키(Cookie)와 매우 유사한 개념이지만, 쿠키의 단점을 극복하는 개선점이 도입되었습니다.

---

Local Storage

• 로컬에 도메인 별로 지속되는 storage입니다.
• local storage는 시간 제한이 없고, 브라우저가 꺼져도 지워지지 않으며, 값을 지우려면 직접 지워줘야합니다.
• 클라이언트에 데이터를 저장할 수 있습니다.

---

Session Storage

• 세션(프로세스, 탭, 브라우저)이 종료될 때까지 지속되는 storage입니다.
• session storage는 세션이 종료됨과 동시에 값이 지워집니다. 이 소멸 타이밍이 local storage와 가장 큰 차이점입니다.

---

Cookies

• 쿠키는 서버측과 클라이언트측 양쪽에서 쿠키 데이터를 사용하는 api가 존재합니다.
• 이런 이유로 저장된 쿠키 데이터의 쓰임이 양쪽 모두이냐를 고려해야하며, 만약 서버쪽 사용이 필수적이고 잦다면 로컬 저장소가 아닌 클라이언트와 서버와의 인터렉션이 좀 더 효과적인 쿠키값을 사용하는 것이 좋을 수도 있습니다.
• 보통 우리가 어떤 웹사이트에 들어가면 항상 보는 광고 7일 동안 보지 않기 역시 쿠키 기능입니다. 왜냐하면 로컬 스토리지에는 기간 기능이 없기 때문입니다.

---

Web Storage vs Cookies

• 사이트의 도메인 단위로 접근이 제한됩니다. 이는 데이터의 보안 측면에서는 당연한 이야기입니다.

Web Storage	Cookies
- 저장된 데이터가 클라이언트에 존재할 뿐, 서버로 전송은 이루어지지 않습니다.이는 네트워크 트래픽 비용을 줄여줍니다.	- 매번 서버로 전송됩니다.
- 용량의 제한이 없습니다.	- 개수와 용량에 제한이 있습니다.
- 데이터를 영구적으로 저장이 가능합니다.	- 만료일자를 지정하게 되어 있어서 언젠가는 제거됩니다.

---

Local Storage vs Session Storage

Local Storage	Session Storage
- 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능합니다.	- session이 종료됨과 동시에 Session Storage가 삭제되므로, 데이터가 지워집니다.
- 도메인마다 별도로 로컬 스토리지가 생성됩니다.	- 같은 사이트의 같은 도메인이라고 할지라도, 브라우저가 다르면 서로 다른 영역이 됩니다. 브라우저 컨텍스트가 다르기 때문입니다.
- 도메인만 같으면 전역적으로 데이터가 공유가 가능합니다.	- 도메인이 같더라도 서로 다른 별개의 영역이기 때문에 서로 침범하지 못합니다.
- Windows 전역 객체의 Local Storage라는 컬렉션을 통해 저장과 조회가 이루어집니다.	- Windows 전역 객체의 Session Storage라는 컬렉션을 통해 저장과 조회가 이루어집니다.

---

📚 출처

• https://velog.io/@ejchaid/localstorage-sessionstorage-cookie의-차이점
• https://kcizzang.tistory.com/entry/SessionStorage-와-LocalStorage-차이점
• https://inpa.tistory.com/entry/JS-📚-localStorage-sessionStorage