[JS] 클라이언트 스토리지

클라이언트 스토리지

- 사용자의 컴퓨터에 데이터를 저장하기 위한 브라우저의 API

- 웹 브라우저에게 메모리를 제공 -> 웹 앱에서 사용자의 설정, 특정한 상태 등을 저장 가능.

- 출처별로 분리되어 저장됨 -> 한 사이트에서 다른 사이트에 저장된 데이터를 읽을 수 없음.

- (같은 사이트의 다른 페이지 내에서는 스토리지를 공유하므로 통신 메커니즘을 활용하면 가능.)

- 데이터의 생명주기 설정 가능.

- 저장된 데이터는 암호화되지 않음.

1. 웹 스토리지

- HTML5에 정의된 API, 현재는 독립적인 표준.

- 본질적으로 문자열 키와 값을 대응시킨 영속적 연관 배열인 로컬 스토리지와 세션 스토리지 객체로 구성됨.

- 너무 크지 않은 대량의 데이터를 저장하기에 적합.

- 구형 브라우저에서는 지원하지 않음.

로컬 스토리지

- 데이터 생명주기

만료기한 없음.

웹 애플리케이션이 삭제되기 전이나 사용자가 브라우저의 특정 인터페이스를 통해 삭제하기 전까지 영구적으로 사용자의 컴퓨터에 존재.

- 접근 가능 대상 범위

문서의 출처(프로토콜(http), 호스트명(www.example.com), 포트(80) 등에 의해 정의됨.)로 국한.

같은 출처의 모든 문서들은 한 로컬 스토리지 데이터를 공유.(read/write 가능)

세션 스토리지

- 데이터 생명주기

최상위 창 또는 해당 스크립트를 실행하는  브라우저의 탭과 동일.

(창이나 탭이 닫히면, 세션 스토리지를 통해 저장된 데이터 또한 삭제됨.)

(최신 브라우저에는 마지막 브라우징 세션 복구 기능 유.)

- 접근 가능 대상 범위

문서의 출처로 국한.

개별 창에 기반.(같은 출처의 다른 브라우저 탭이 있다면 각자 다른 세션 스토리지 존재.)

스토리지 이벤트

- addEventListener(), attachEvent() 를 이용하여 핸들러 등록.

- 이벤트 핸들러 프로퍼티

key: 설정되거나 삭제된 데이터의 이름/키. clear() 호출시 null

newValue: 새로운 값 또는 removeItem() 호출 시 null

oldValue: 저장하고 있던 본래 값. 새 데이터 추가되었을 경우 null

storageArea: 타깃 Window 객체

url: 스토리지를 변경한 스크립트가 포함된 문서의 URL(문자열)

2. 쿠키

- 서버 측에서 스크립팅 가능하도록 설계된 클라이언트 스토리지 메커니즘.

- 웹브라우저에 의해 저장되는 이름을 가진 작은 크기의 데이터.

- 웹 페이지 또는 사이트에 한정됨.

- 저수준 HTTP 프로토콜의 확장 기능으로 구현됨.

- Document 객체의 cookie 프로퍼티를 특별한 형식의 문자열 형식으로 읽고 쓰는 방식으로 동작.

- 각 쿠니의 생명주기와 범위는 쿠키 속성으로 개별 지정 가능.

- navigator.cookieEnabled 프로퍼티로 쿠키 사용 가능 여부 확인.

쿠키 속성: 생명주기와 범위

- 생명주기: 기본적으로 일시적.

- 범위: 문서의 출처와 경로에 의해 제한됨.

쿠키 저장

- name=value

; max-age=seconds

; path=path

; domain=domain

; secure 형식의 문자열로 저장.

- ex) document.cookie = "version="+encodeURIComponent(document.lastModified); // decodeURIComponent()로 읽음.

- 삭제 시, 같은 이름, path, domain을 임의의 값 또는 빈 값으로 지정하고, max-age 속성을 0으로 설정.

 

참조)쿠키와 세션 개념

참조)로컬 스토리지, 세션 스토리지, 쿠키

 

그림 참조)

version과 version2는 추가한 것.

document.cookie = "version="+encodeURIComponent(document.lastModified);
document.cookie = "version2="+encodeURIComponent(document.lastModified);
document.cookie = 으로 추가해도 key값이 다르면 새로 추가됨.

 

3. IE User Data

- IE 5 이후의 전용 클라이언트 스토리지 메커니즘(userData).

- 적정 크기의 문자열 데이터 저장 가능.

- 생명주기

삭제 전까지.

expires 프로퍼티로 만료 날짜 지정할 수도 있음. ex) 100일 후로 지정 var expires = now + 100 * 24 * 60 * 60 * 1000;

4. 오프라인 웹 애플리케이션

- HTML5의 API.

- 웹 페이지와 해당 페이지의 리소스를 캐시.

5. 웹 데이터베이스

- 큰 양의 데이터를 활용해 작업해야 경우 사용.

6. 파일 시스템 API

- 개인 로컬 파일 시스템의 제어권을 획득하여 해당 파일 시스템의 파일을 읽어 들이거나 쓸 수 있게 하는 API.