클라이언트 측에 데이터를 저장하는 방식
- 쿠키
- 로컬스토리지
- 세션스토리지
- IndexedDB
WebSQL(deprecated)
💡 HTTP 프로토콜의 특성이자 약점을 보완하기 위해서 쿠키와 세션을 사용한다.
HTTP 프로토콜은 connectionless, stateless한 특성으로 클라이언트가 누구인지 매번 확인을 해야한다.
- connectionless(비연결성) : 클라이언트가 요청을 한 후 응답을 받으면 그 연결을 끊어 버리는 특징
- stateless(무상태): 통신이 끝나면 상태를 유지하지 않는 특징
쿠키
- 쿠키는 서버와 클라이언트 간의 지속적인 데이터 교환을 목적으로 서버로 계속 전송됨.
- 사용자가 따로 요청하지 않아도 브라우저가 Request 시에 Request Header를 넣어서 자동으로 서버에 전송.
- 위의 이유로 서버에 불필요한 데이터가 계속 전송되면 데이터낭비가 발생한다.
- 중요한 정보는 쿠키에 저장은 부적절하다. (중요한 정보는 세션에서 관리)
- 사용자의 컴퓨터를 통해 쿠키에 입력된 값을 쉽게 확인해 쿠키 탈취 가능
쿠키는 세션 쿠키, 영구 쿠기 2가지 유형으로 나뉜다.
세션 쿠키
- 만료 날짜를 지정하지 않으면 세션 쿠키로 간주된다.
- 메모리에 저장되며 디스크에 기록되지 않는다.
- 브라우저가 종료되면 소멸된다. (브라우저 세션 동안 유지)
- 민감한 정보를 관리한다. ex) 인터넷 뱅킹 로그인
영구 쿠키
- 만료 날짜를 지정하면 영구 쿠키로 간주된다.
- 만료일이 지나면 쿠키가 디스크에서 제거된다.
- 브라우저 재실행 시 디스크에 저장된 쿠키를 복구한다.
- 영구적으로 관리할 정보를 관리한다. ex) 로그인 유지
+ 세션
- 정보를 서버에 저장해 쿠키보다 보안에 좋지만, 사용자가 많아질수록 서버 메모리를 많이 차지한다.
- 동접자 수가 많다면 서버 과부하로 성능 저하 발생
- 로그인시 세션DB에서 유저를 생성하고 세션ID를 쿠키(매개체)를 통해 브라우저에 저장된다.
따라서 페이지 이동시에도 재로그인을 하지 않는다. - 서버는 클라이언트가 보낸 요청의 쿠키에 담긴 세션 ID와 세션 스토리지에 담긴 세션 ID를 대조해 인증 상태를 판단한다.
세션을 통해 모바일 앱을 제작할 수 있지만 모바일에선 쿠키가 없기 때문에 토큰이라는 새로운 인증 방식을 사용한다.
💡 HTML5에서 쿠키의 단점을 보완하고자 웹스토리지라는 기술이 등장했다.
웹스토리지
- 프로토콜, 호스트, 포트가 같으면 같은 스토리지를 공유
- 웹스토리지:
로컬스토리지,세션스토리지둘의 차이점은 영구성 - 웹스토리지, 쿠키는
key: value형태로 이루어져있다. - 문자열만 저장 가능, 하지만 JSON 데이터를 문자열로 변환하여 저장 가능
- 웹스토리지는 로컬에 클라이언트에 대한 정보를 저장한다.
- pw와 같은 중요한 정보는 웹스토리지에 저장❌ (클라이언트에 저장해서 위험)
- 도메인별 용량 제한이 존재, 모바일: 2.5mb, 데스크탑: 5mb~10mb (브라우저마다 차이 존재)
로컬스토리지
- 데이터를 제거하지 않는한 영구적으로 저장 (브라우저 종료시에도 유지)
- 다른 브라우저 탭이라도 동일한 도메인이면 로컬 스토리지 공유
- 지속적으로 필요한 데이터는 로컬스토리지에 저장 , ex) 자동로그인, 글 임시저장
세션스토리지
- 세션 종료 시(윈도우, 탭 닫음) 데이터 제거
- 탭/ 윈도우 단위로 세션 스토리지가 생성 따라서 도메인, 윈도우 탭별 독립적인 공간
- 잠시 필요한 정보는 세션스토리지에 저장 ,ex)비로그인 장바구니, 이전 페이지 저장, 이전 스크롤 위치 저장, 일회성 로그인
IndexedDB (IDB)
- 더 많은 양의 데이터가 저장 가능하며 하드디스크의 절반가까이 사용 가능
- 크롬, 엣지: HDD 60%, 파이어폭스: 50%
- 문자열, 숫자와 같은 단순한 값으로 제한되지 않으며 비디오, 이미지 등 거의 모든 것이 저장 가능
- 많은 양의 구조화된 데이터 저장 가능
