Client-side Storage란?
Client-side Storage는 클라이언트 측 저장소로서 웹 브라우저에서 사용자의 허락 하에 사용자 컴퓨터에 웹사이트 정보를 저장할 수 있는 저장소이다. 브라우저 자체에 데이터를 저장함으로써 사용자가 필요할 때마다 서버에서 정보를 가져오는 것을 건너뛸 수 있다.
용도
- 웹사이트에 대한 선호 개인화
(예, 사용자가 선택한 커스텀 위젯, 배색, 폰트 크기 사용) - 이전 활동 기록 저장
(이전 세션에 담았던 장바구니 목록 저장, 로그인 유지) - 사이트 다운로드가 빨라지고(잠재적으로 비용이 적게 들어가고) 네트워크 연결 없이도 사용할 수 있게끔 데이터를 로컬에 저장
- 오프라인 상태에서 사용할 수 있도록 웹 애플리케이션 생성 문서를 로컬에 저장
종류
쿠키(Cookie)
쿠키(Cookie)는 웹 스토리지(Web Storage) 이전부터 꾸준히 사용된 가장 오래된 형태의 클라이언트 저장소(Client-side Storage)로서 클라이언트 로컬에 저장되는 문자열(String)타입의 Key-Value 쌍의 작은 데이터 파일이다.
클라이언트에서 300개의 쿠키가 저장될 수 있으며, 하나의 도메인을 기준으로는 20개의 쿠키가 저장될 수 있다.(하나의 쿠키는 최대 4KB까지 저장될 수 있다.)
브라우저는 그 데이터 조각들을 저장해 놓았다가 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송한다.
< 쿠키(Cookie) 동작 방식 >
1. 클라이언트가 페이지를 요청한다.(웹사이트 접속)
2. 서버에서 쿠키를 생성한다.Set-Cookie: <cookie-name>=<cookie-value>
- HTTP 헤더에 쿠키를 포함하여 응답한다.
(Response Header에 Set-Cookie 속성을 사용하여 클라이언트에 쿠키를 만들 수 있다.)- 같은 요청을 할 경우, HTTP 헤더에 쿠키를 함께 보낸다.
(쿠키는 클라이언트 요청시 자동으로 Request Header에 담겨 서버로 전송되기 때문에 보안에 취약하다.)HTTP/1.0 200 OK Content-type: text/html Set-Cookie: yummy_cookie=choco Set-Cookie: tasty_cookie=strawberry
- 서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때,
쿠키를 업데이트하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답한다.GET /sample_page.html HTTP/1.1 Host: www.example.org Cookie: yummy_cookie=choco; tasty_cookie=strawberry
쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지 판단할 때 주로 사용한다.
다음은 쿠키의 주 사용 목적이다.
- 세션 관리(Session Management)
- 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리
- 개인화(Personalization)
- 사용자 선호, 테마 등의 세팅
- 트래킹(Tracking)
- 사용자 행동을 기록하고 분석하는 용도
쿠키는 라이프타임에 따라 다음 두가지 방식으로 정의할 수 있다.
- 세션 쿠키(Session Cookie)
- 현재 세션이 끝날 때(웹 브라우저를 닫을 때) 삭제된다.
- 영속적인 쿠키(Persistent Cookie)
- Expires 속성에 명시된 날짜에 삭제되거나, Max-Age 속성에 명시된 기간 이후 삭제된다.
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;
웹 스토리지(Web Storage)
웹 스토리지(Web Storage)는 쿠키(Cookie)와 마찬가지로 도메인 단위로 데이터 저장이 가능한 브라우저 저장소이다. (A 도메인에 저장한 데이터를 B 도메인에서 조회할 수 없음)
HTML5부터 지원하며, Key-Value 쌍의 아이템으로 데이터를 저장한다. 문자열 외에도 구조화된 객체를 저장할 수 있다.
또한, 쿠키(Cookie)와 달리 서버로 전송되지 않기 때문에 서버의 부담이 없고, 필요한 경우에만 꺼내 사용하므로 자동 전송의 위험성이 없어 CSRF에 안전하다.
CSRF란?
원 클릭 공격 또는 세션 라이딩 이라고도 하는 CSRF 또는 XSRF 로 약칭되는 사이트 간 요청 위조는 사용자로부터 승인되지 않은 명령이 제출되는 웹 사이트의 악의적인 익스플로잇 유형이다.
데이터의 지속성에 따라 다음 두 가지 방식으로 정의할 수 있다.
1. 세션 스토리지(Session Storage)
세션 스토리지(Session Storage)는 페이지의 세션이 유지되는 동안(페이지 리로딩 및 복원을 포함한 브라우저가 열려있는 동안) 각 origin별로 독립적인 저장 공간을 제공한다.
즉, 브라우저에서 같은 웹사이트를 여러 탭이나 창으로 띄울 경우, 여러 개의 세션 스토리지가 서로 격리되어 저장되고, 각 탭이나 창이 닫힐 때 저장된 데이터도 함께 소멸된다.
독립적인 저장 공간이기 때문에 동일한 도메인이라도 브라우저가 다른 경우, 서로 다른 영역으로 데이터를 공유할 수 없다.
쿠키(Cookie)와 달리 데이터를 서버로 전송하지 않고, 저장 공간은 쿠키보다 큰 최대 5MB의 크키를 가진다.
// 세션 스토리지에 아이템 저장 (item name, item value)
sessionStorage.setItem('name', 'Chris');
// 세션 스토리지에서 아이템 가져오기 (item name)
let myName = sessionStorage.getItem('name');
// 세션 스토리지에서 아이템 제거하기 (item name)
sessionStorage.removeItem('name')2. 로컬 스토리지(Local Storage)
로컬 스토리지(Local Stroage)는 세션 스토리지와 동일하지만, 동일한 컴퓨터에서 동일한 브라우저를 사용할 때 페이지의 세션이 끝나더라도(브라우저가 닫히거나 다시 열리더라도) 유지된다. 따라서, 저장한 데이터는 명시적으로 지우지 않는 한 영구적 보관이 가능하다.
도메인 별 로컬 스토리지가 생성되기 때문에 동일한 도메인의 경우, 데이터 공유가 가능하다.
// 로컬 스토리지에 아이템 저장 (item name, item value)
localStorage.setItem('name', 'Chris');
// 로컬 스토리지에서 아이템 가져오기 (item name)
let myName = localStorage.getItem('name');
// 로컬 스토리지에서 아이템 제거하기 (item name)
localStorage.removeItem('name')IndexedDB
IndexedDB는 SQL을 사용하는 관계형 데이터베이스(RDBMS)와 같은 트랜잭선을 사용하는 데이터베이스 시스템이다. 그러나 IndexedDB는 RDBMS의 고정 컬럼 테이블 대신 JavaScript 기반의 객체지향 데이터베이스이다.
IndexedDB는 사용자의 브라우저에 데이터를 영구적으로 저장할 수 있는 방법 중 하나이다.
네트워크 상태에 상관없이 풍부한 쿼리 기능을 이용할 수 있는 웹 애플리케이션을 만들 수 있기 때문에, 웹 애플리케이션은 온라인과 오프라인 환경에서 모두 동작할 수 있다.
인덱스 키를 사용하여 데이터를 저장하고 검색할 수 있으며, 구조화된 복사 알고리즘을 지원하는 객체라면 모두 저장할 수 있다.
사용하려면 데이터베이스 스키마를 지정하고, 데이터베이스와 통신을 연 후에, 일련의 트랜잭선을 통해 데이터를 가져오거나 업데이트해야 한다.
< 기본 패턴 >
1. 데이터베이스 열기
2. 객체 저장소(Object Store) 생성
3. 트랜잭선(Transaction)을 시작하고,
데이터를 추가하거나 읽어들이는 등의 데이터베이스 작업 요청
4. DOM 이벤트 리스너를 사용하여 요청이 완료될 때까지 대기
5. (요청 객체에서 찾을 수 있는) 결과 사용
Cache
캐시(Cache)는 데이터나 값을 미리 복사해 놓은 임시 장소를 가리킨다.
캐시는 캐시의 접근 시간에 비해 원래 데이터를 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우 사용한다.
캐시에 데이터를 미리 복사해 놓으면 계산이나 접근 시간 없이 더 빠른 속도로 데이터에 접근할 수 있다.
이미지, 비디오, 오디오, CSS, JS 등 다시 사용될 가능성이 높고, 변경 사항이 크지 않으며, 용량이 큰 파일을 주로 저장하고 재사용함으로써 페이지 로딩 속도를 향상시킨다.
