Storage
HTTP 프로토콜 특징
- 비연결지향 (Connectionless) : 클라이언트가 서버에게 Request를 보내고 서버가 클라이언트에게 Response를 보내면 접속을 종료한다.
- 무상태 (Stateless) : 통신이 끝나면 상태정보를 유지하지 않는다.
클라이언트의 로그인 정보나 브라우저에서 입력한 값 등이 페이지를 이동할 때마다 초기화 되므로, 이러한 문제점을 해결하기 위해 데이터 저장에 사용되는 것이 Cookie, Session, 그리고 Web Storage이다.
Cookie
Cookie는 클라이언트 로컬에 저장되는 키와 값 형태의 작은 파일로 이름, 값, 만료 시간, 경로 정보가 들어있다. 웹 사이트에 의해 유저의 컴퓨터에 놓아지는 작은 텍스트 파일들이다. Cookie의 목적은 3가지이다.
- 세션 관리: 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리
- 사용자 맞춤: 사용자가 선호하는 옵션이나 테마 등의 세팅
- 사용자 추적: 사용자의 행동을 기록하고 분석하는 용도
Response Header의 Set-Cookie 속성을 사용하면 클라이언트에 Cookie를 만들 수 있으며, 만들어진 Cookie는 클라이언트가 따로 설정하지 않아도 브라우저가 Request Header에 넣어서 서버로 전송하게 된다.
-
매번 서버로 전송된다.
웹 사이트에서 Cookie를 설정하면 이후 모든 웹 요청은 Cookie 정보를 포함하여 서버로 전송된다. -
제한적인 용량
Cookie는 개수와 용량에 제한이 있는데, 하나의 사이트에서 저장할 수 있는 최대 Cookie수와 용량은 20개, 4KB로 제한되어있다. 하지만 보통 제한된 용량까지 저장할 일이 없다. -
반 영구적으로 데이터 저장 가능하다.
Cookie는 만료일자를 지정하게 되어 있어 언젠가 제거된다. 만료일자를 지정하지 않으면 Session Cookie가 된다. 영구 Cookie를 원한다면 만료일자를 굉장히 멀게 설정하는 방법이 있다.
| Persistent Cookie | session Cookie |
|---|---|
| 만료일을 포함하지 않는다. | 만료일을 가진다. |
| 브라우저 탭이 열려있는 동안에만 저장된다. | 만료일까지 유저의 저장소에 저장되고, 만료일이 지나면 삭제된다. |
| 은행 웹사이트에서 사용된다. |
Session
Session은 일정 시간동안 브라우저로부터 들어오는 일련의 요구를 하나의 상태로 보고 그 상태를 유지하는 기술이다. 여기서 일정 시간이란 방문자가 브라우저를 통해 서버에 접속한 시점부터 브라우저를 종료함으로써 연결을 끝내는 시점까지이다.
클라이언트가 Request를 보내면 Response에 Set-Cookie를 통해 클라이언트의 유일한 ID값을 생성해 부여하고 이를 통해 사용자 정보는 안전한 서버에 존재하며, 클라이언트와 서버 간에 ID 값만을 전달해 보안 위협을 감소시켜준다.
Session의 내용은 서버에 저장됨으로, 계속해서 늘어나면 서버에 부하가 발생할 수 있다.
Cookie와 Session의 차이점
| Cookie | Session |
|---|---|
| 컴퓨터의 메모리에 저장 | 서버에 저장 |
| 탈취와 변조 위험 | 서버에 위치하고 ID값만 가지고있어 상대적으로 안전 |
| 브라우저를 종료해도 파일로 남음 | 브라우저 종료시 삭제 |
| 파일을 읽기때문에 속도가 빠름 | 요청마다 서버에서 처리하므로 속도가 느림 |
Web Storage
HTML5에는 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage 스펙이 포함되어 있다.
Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다.
그리고 영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있다.
Web Storage는 기존 웹 환경의 쿠키와 유사한 개념이다. 기존 쿠키의 단점을 극복하는 개선점이 도입되었다.
Web Storage의 특징
- 서버 전송이 없다.
- 단순 문자열을 넘어 객체정보를 저장할 수 있다.
- 용량의 제한이 없다. (약 5MB)
- 영구 데이터 저장이 가능하다.
Web Storage 종류
| Local Storage | Session Storage |
|---|---|
| 브라우저 종료해도 영구적 보관가능 | 세션 종료하면 자동으로 제거 |
| 도메인이 다른경우 Storage 접근 불가 | 세션이 다르면 데이터 접근 불가 |
| Window 전역객체의 LocalStorage 사용 | window 전역객체의 SessionStorage 사용 |
Web Storage와 Cookie의 차이점
| Web Storage | Cookie |
|---|---|
| 서버 전송 X | 매번 서버로 전송 |
| 용량 제한 X | 용량 제한 O |
| 영구적 데이터 저장 | 반영구적 데이터 저장 |
| 문자열을 넘어 객체정보 저장 |
어떤 유형의 데이터를 어디에 저장하면 좋을까?
- 자동로그인 -> Local Storage
- 입력 폼 정보 -> Session Storage
- 비로그인 장바구니 -> Session Storage
- 다시 보지 않음 팝업 창 -> Cookie
Reference
https://velog.io/@gay0ung/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%A0%80%EC%9E%A5%EC%86%8C
https://velog.io/@ejchaid/localstorage-sessionstorage-cookie%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90
https://velog.io/@hellozin/%EC%BF%A0%ED%82%A4-%EC%84%B8%EC%85%98-%EA%B7%B8%EB%A6%AC%EA%B3%A0-%EC%9B%B9-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80
https://chrisjune-13837.medium.com/web-%EC%BF%A0%ED%82%A4-%EC%84%B8%EC%85%98%EC%9D%B4%EB%9E%80-aa6bcb327582
https://88240.tistory.com/190