1. 클라이언트 측 저장소를 사용하는 이유
- 클라이언트(사용자)측 브라우저에 저장하기 위한 API ➡️ 네트워크 없이 빠르게 데이터베이스에 접근 가능!
- HTTP 프로토콜의 특징이자 약점을 보완하기 위해!
HTTP 프로토콜의 특징
-
Connectionless Protocol(비연결 지향)
: 클라이언트가 서버에 요청(request)를 하고 응답을 받으면 연결을 끊는 서버 처리 방식 -
Stateless protocol
: 서버가 클라이언트의 상태 정보를 저장하지 않는 서버 처리 방식
➡️ 통신이 끝나면 상태는 유지되지 않는다
- 통신이 연속적으로 이어지지 않고 통신이 한 번 완료되면 끊어짐
- 데이터가 유지되지 않는다
➡️ 매번 페이지 이동할 때마다 로그인을 다시해야하는 불상사가 발생함
이를 보완하기 위해 쿠키나 세션을 사용하는 것❗️
쿠키: 로컬 PC에 저장
세션: 웹 서버에 저장
2. 클라이언트 사이드 저장소 특징
1. 로컬 저장소(LocalStorage)
- key - value 형식
- 브라우저를 닫아도 계속 정보가 남아있음
- 저장한 데이터를 지우지 않는 이상 영구적으로 보관 가능
- 도메인 단위로 로컬 스토리지 생성, 따라서 서로 다른 도메인에서 로컬 스토리지에 접근 불가함
- JSON 데이터를 문자열로 변환하여 저장
- JS에서 데이터 저장, 전송할 때 가장 많이 사용되는 경량의 데이터 교환 형식
- 쿠키보다 더 직관적, 안전 그러나 문자열만 가능
사용예시
: 자동 로그인
2. 세션 저장소(SessionStorage)
- key - value 형식
- 브라우저를 닫으면 정보가 삭제됨
- 사용자가 다른 페이지로 이동, 어플리케이션 종료(브라우저 닫기) 시 데이터 삭제
- JSON 데이터를 오직 탭 세션에 저장
사용예시
: 일회성 로그인, 입력 폼 저장
3. 쿠키🍪(Cookie)
: 클라이언트(브라우저) 로컬에 저장되는 key - value 형태의 작은 데이터 파일
- 이름, 값, 유효시간(저장기간), 도메인, 경로로 구성
- 문서 내부에 간단한 문자열 데이터를 저장
- 직접 삭제하지 않아도, 원하는 시기에 자동으로 만기(expire) 되도록 설정 가능
- 요청 속도가 세션보다 빠름(세션은 서버 처리가 필요하기 때문)
- 적은양, 문자열만 저장 가능 👉 용량 제한이 있음(하나의 도메인에서 최대 20개)
- 고전적, 보안 이슈 👉 암호화 되지 않은 상태로 사용됨
- 페이지 부하를 증가시킴 👉 쿠키를 설정하면 이후 모든 웹 요청(HTTP request)은 쿠키정보를 포함해서 서버로 전송(매번 서버로 전송됨)
사용예시
:로그인 상태 유지, http의 상태 연결 특성 보완
4. 인덱스드디비(IndexedDB)
: key를 이용해 index되는 구조화된 데이터를 쉽게 저장할 수 있음
위 3개의 단점을 보완
- 단순 문자열 ㄴㄴ,더 복잡하고 구조적인 데이터 다루기 가능
- 더 많은 양의 데이터를 저장
- 여러개의 데이터베이스를 갖고 각 데이터베이스 내부에 여러개의 table 생성 가능
- key를 기반으로 저장, 조회
3. 그래서 LocalStorage, SessionStorage, Cookie 차이가 뭐야?
공통점
비슷한 역할, 비슷한 동작원리
: 해당 도메인과 관련된 데이터를 클라이언트 사이드에 저장, 도메인 단위로 접근 제한
차이점
쿠키🍪
1. 적은양, 문자열만 저장 가능
2. 매번 서버로 전송(페이지 부하)
3. 보안 이슈(스니핑 주의❗️)
4. 만료일자 존재
Web Storage🍪
1. 많은 양, 문자열 저장 가능
2. 클라이언트에만 저장, 서버로 전송 ❌
3. 비교적 좋은 보안성(쿠키를 이용해 sessionid만 저장, 아이디로 구분해 서버에서 처리)
4. 영구적 저장
LocalStorage
: 브라우저를 닫아도 데이터 영구적으로 보관 가능
SessionStorage
: 부라우저를 닫으면 정보가 삭제됨
참조
https://interconnection.tistory.com/74
엘리스 sw 자료 - https://bitsofco.de/an-overview-of-client-side-storage(이걸 참조한거 같음)
