[Web Storage] 브라우저 저장소 란?

---

 

 

1. 서론

예전에 토이 프로젝트를 하다가 문득 떠올랐던 생각이 있었다.

쇼핑몰에서 비회원으로 장바구니에 담을 때 어떻게 담는 것일까?
매번 접속하는 비회원의 DB를 서버에서 만들면 비효율적일 것 같은데..

이러한 궁금증은 브라우저 저장소를 공부하면서 깨닫게 되었다.

 

 

2. 브라우저 저장소

Chrome, Microsoft Edge와 같은 브라우저에서 저장소를 제공하고 있다.

저장소는 서버가 아닌 로컬에서 해당 브라우저를 이용한다.

그리고 브라우저 저장소는 2가지로 구분되어 이용된다.

① Local Storage

② Session Storage

 

브라우저 저장소를 직접 보고 싶은 경우 (Chrome 기준)

F12(개발자 도구) →  Application → Storage

 

 

3. Storage의 특징

• Key : Value 쌍으로 데이터를 생성하고, Key를 기준으로 데이터를 조회, 변경, 삭제를 한다.
• 문자열 데이터 외에 구조화된 객체도 저장 가능하다.
• Domain 별로 (Local/Session) Storage가 생성된다.
• 용량 제한이 없다.

 

 

3. Local Storage 특징

• Storage의 특징을 모두 가지고 있다.
• 브라우저가 달라도 저장, 조회, 변경 등이 가능하다.
• 브라우저를 종료해도 삭제되지 않는다.
• 즉, 영구 저장소

 

 

4. Session Storage 특징

• Storage의 특징을 모두 가지고 있다.
• 브라우저가 다르면 저장, 조회, 변경 등이 불가능하다.
  Document를 표시하는 환경인 Browser Context가 다르기 때문이다.
• 브라우저를 종료하면 모두 삭제된다.
• 즉, 임시 저장소

 

 

5. Cookies

브라우저 저장소를 공부하보면 Cookies와 비교하는 글을 많이 보게 된다.

Cookies는 브라우저에서 데이터를 저장하는 다른 방법이다.

보통 Cookies는 Server가 유저를 기억하기 위한 수단으로 사용된다.

왜냐하면 Client와 Server는 통신할 때 HTTP 프로토콜을 이용하는데, HTTP 프로토콜을 Connectionless와 Stateless라는 특징 때문입니다.

Connectionless과 Stateless의 특징이란 Client와 Server가 서로 연결하여 데이터를 요청과 응답한 후에 연결을 끊어버리므로 Server는 Client의 상태를 모르는 것입니다.

따라서 이러한 문제를 해결하고자 Cookies를 이용합니다.

 

Cookies는 다음과 같은 특징이 있습니다.

• 문자열 데이터만 저장 가능합니다.
• 4KB로 용량 제한이 있다.
• 모든 HTTP Request에 포함되어 Server로 전송되니 웹서비스 성능에 영향을 줄 수 있다.
• 암호화 되지 않은 상태로 전송되므로 보안에 취약하다.

 

 

6. 결론

쇼핑몰에서 비회원으로 장바구니 이용할 때 위 3가지 저장공간 중에 선택해야 한다면,

 

Local Storage : 브라우저도를 닫아도 장바구니 데이터를 유지할 이유가 없다. → X

Session Storage : 브라우저 닫으면 삭제되고 매 HTTP 요청에 포함하지 않으니 적당 → O

Cookies : 매 HTTP 요청에 포함할 이유가 없다. → X

 

Session Storage를 이용하여 저장하고,

구매버튼 클릭 시 해당 Session Storage를 Server에 전송하는 것이 적절하다.

 

 

---