브라우저 저장소(local storage, session storage, cookie)

❤️‍🔥TIL : Today I Learned

브라우저 저장소
local storage, session storage, cookie

브라우저 저장소에 대해서 차이점을 설명합니다.

---

브라우저 저장소란?

 

- 특정 데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 기능이다.

- 우리가 이용할 수 있는 공간은 크게 Web Storage와 cookie로 분류할 수 있다.

 

+ 사이트의 도메인 단위로 접근이 제한된다. 예를 들면, A도메인에서 저장한 데이터는 B도메인에서 조회할 수 없다. 이는 데이터의 보안 측면에서 당연하다. 

 

 

---

Web Storage

 

 

 

- HTML5 부터 제공하는 기능으로, 키/값 쌍으로 데이터를 저장하며 키를 기반으로 데이터를 조회한다.

- 데이터의 목적에 따라 영구저장소(LocalStorage)와 임시저장소(SessionStorage) 두 개의 공간이 있다.

 

1. LocalStorage(영구)
   : 브라우저를 닫았다가 다시 열어도 계속 유지.
2. SessionStorage(임시)
   : 브라우저가 열려있는 한 페이지를 Reload해도 계속 유지. 하지만 브라우저를 닫으면 삭제.

 

---

cookie

 

- 쿠키는 매번 서버로 전송된다.
- 4KB 용량으로 데이터가 제한되어있다.
- HTTP Request에 암호화 되지 않은 상태로 사용하기 때문에 보안에 취약하다.
- 쿠키는 모든 HTTP Request에 포함되어 있어 웹 서비스 성능에 영향을 줄 수 있다.

 

+ 세션(session)
쿠키는 방문자의 정보를 방문자의 컴퓨터 메모리에 저장한다. 하지만 세션은 방문자의 요청에 따른 정보를 방문자 메모리가 아니라, 웹 서버가 세션 아이디 파일을 만들어 서비스가 돌아가고 있는 서버에 저장한다.

쿠키와 달리 세션은 사용자의 로그인 정보에 대한 보안을 한층 업그레이드 할 수 있기 때문에, 웹사이트에 방문하여 계속 접속을 유지할 때 이전의 접속 정보를 이용할 수 있는 방법으로 많이 사용한다.

 

 

---

가장 큰 차이

 

 

쿠키는 매번 서버로 전송되고 문자열만 저장 가능하며 만료일자가 존재한다.

Web Storage는 데이터를 클라이언트에 저장만 하고 서버로 전송되지는 않는다.

 

 

 

+ 추가로 쿠키/세션은 캐시와 다르다는 것을 기억하자. 캐시는 이미지나 css, js파일 등을 브라우저나 서버 앞 단에 저장해놓고 사용하는 것이다. 한 번 캐시에 저장되면 브라우저를 참고하기 때문에 서버에서 변경이 되어도 사용자는 변경되지 않게 보일 수 있는데, 이런 부분은 캐시를 지워주거나 서버에서 클라이언트 응답을 보낼 때 header에 캐시 만료시간을 명시함으로써 해결할 수 있다.

 

 

---

 

 최종 정리

1. 브라우저 저장소에는 cookie와 Web Storage 가 있다.
2. 쿠키는 서버로 전송되며 4KB의 문자열만 저장가능하고 만료일자가 존재한다.
3. Web Storage는 서버로 전송되지 않으며 목적에 따라
   영구저장소(LocalStorage)나 임시저장소(SessionStorage)를 사용할 수 있다.
4. 캐시는 브라우저 저장소가 아니다.