[웹개발] 브라우저 저장소 (로컬스토리지, 세션스토리지, 쿠키)

배경설명

브라우저 저장소가 필요한 이유

1. 클라이언트는 서버에게 요청하고 (request), 서버는 클라이언트에게 응답한다 (reponse)
2. 통신이 끝나면 인증에 쓰이는 상태 정보를 유지하지 않는다
3. 계속해서 통신 연결을 하지 않기 때문에 자원낭비가 줄어든다
4. 하지만 통신을 할때마다 새로 서버 요청을 해야되기 때문에 클라이언트가 그때마다 인증을 다시 해주어야한다는 단점이 생긴다
5. 클라이언트와 서버가 통신하지 않고도 인증에 쓰이는 상태 정보를 유지하기 위해 사용하는 저장소가 브라우저 저장소다!

→ 브라우저 저장소가 있기 때문에 사이트를 불러오는 속도가 빨라지며 네트워크 연결 없이도 사용이 가능하다

브라우저 저장소가 없다면?

웹사이트에서 로그인을해도 페이지를 이동할때마다 로그인을 다시 해줘야한다...

 

브라우저 저장소의 종류

쿠키와 웹스토리지 모두 해당 도메인에 대한 데이터를 브라우저에 저장

1. 쿠키
2. 웹 스토리지 (지속성에 따라 두가지로 나뉨)
   • 로컬 스토리지
   • 세션 스토리지

 

쿠키(Cookie)

서버가 클라이언트에게 전송하는 작은 데이터 파일

쿠키가 작동하는 방식

1. 사용자의 데이터를 저장하기위해 서버는 쿠키를 이용해서 브라우저에 데이터를 넣을 수 있다
2. 서버가 클라이언트에게 응답할때 그 응답 속에 쿠키가 있을 수 있다
3. 이때 브라우저에 쿠키를 저장한다
4. 해당 웹사이트에 방문할때마다 브라우저는 해당 요청과 함께 저장된 쿠키도 함께 보내게 된다
5. 참고로 쿠키는 도메인에 따라 제한되며 서버가 정한 기간에 따라 유효하다

쿠키를 사용하는 사례

언어설정

1. 웹사이트 언어 설정을 바꾸면 서버는 쿠키를 준다
2. 쿠키에서 사용자가 선택한 언어를 저장한다
3. 사용자가 해당 웹사이트를 다시 방문하고 서버에 요청을 보낸다
4. 이때 쿠키는 클라이언트 요청과 함께 서버로 보내진다
5. 서버는 쿠키가 기억해둔 언어설정의 페이지를 제공한다

쿠키의 단점

• 매번 서버에 전송해야한다
• 개수에 제한이 있다
• 저장 용량이 작다
• 보안에 취약하다

→ 웹 스토리지의 등장!!

 

웹 스토리지 (Web Storage)

• HTML5부터 등장한 새로운 기술로 쿠키의 단점을 보완하였다
• 클라이언트에 저장만 할뿐 서버로 전송되지는 않는다
• key value 값으로 데이터를 저장한다
• 웹 스토리지는 지속성에 따라 Local Storage(영구 저장소)와 Session Storage(임시 저장소)로 나뉜다

웹 스토리지의 특징

1. 서버전송이 없다
   → 저장된 데이터가 클라이언트에 존재할 뿐 서버로의 전송은 없다 (네트워크 트래픽 비용 감소)
2. 단순 문자열을 넘어 객체정보를 저장할 수 있다
3. 용량 제한이 없다
   → 기존 쿠키는 4KB로 제한되었는데 이에 대한 문제해결이 가능하다
4. 영구적으로 데이터를 저장할 수 있다
   → 만료기간 설정이 없으며 삭제하지 않는 한 영구적으로 존재한다

 

Local Storage (영구 저장소)

• 브라우저 자체에 반영구적으로 데이터를 저장
• 브라우저를 종료해도 데이터가 유지
• i.e.) 자동로그인

 

Session Storage (임시 저장소)

• 탭 윈도우 단위로 생성이 됨 (해당 페이지를 reload해도 데이터가 유지된다)
• 탭을 닫을때 데이터가 사라짐
• i.e.) 비로그인 장바구니 기능

 

쿠키 VS 로컬 스토리지

Cookies are smaller and send server information back with every HTTP request, while LocalStorage is larger and can hold information on the client side.

 

---

 

Reference

• 수근수근: 브라우저 저장소(Web Storage)
• limuubin.log: 브라우저저장소 비교하기