Web Storage

- JavaScript로 데이터를 로컬 환경에 손쉽게 저장할 수 있음.

 

* Web Sotrage란?

- Web Storage는 데이터를 사전과 같은 형식으로 웹 브라우저에 저장하는 장치임.

- Cookie와는 달리 서버와의 통신으로 데이터가 보내지는 일은 없음

- 또한 4KB라는 용량 제한이 있는 Cookie보다 큰 데이터를 취급할 수 있음.

- 키와 값이 세트로 저장됨.

 

 

* 로컬 스토리지와 세션 스토리지

- Web Storage에는 로컬 스토리지와 세션 스토리지가 있음.

- 세션 스토리지는 저장기간이 동일 세션으로 한정된다는 점이 다름.

- 어떤 경우이든 오리진을 넘어서 데이터를 공유할 수는 없음.

- 세션 스토리지는 일련의 조작 사이에서만 데이터가 저장됨.

- 로컬 스토리지에 저장한 데이터는 웹 브라우저를 닫아도 그대로 남음.

 

[오리진이란?]

 

- URL의 스킴, 도메인, 포트 번호를 조합한 것을 '오리진'이라고 함.

- 예를 들어 다음 부분이 오리진임.

http://www.cyber.co.kr:80/a/b/c.html

스킴      도메인         포트

 

- 프로바이더나 렌탈 서버에서는 동일한 오리진을 다른 사람과 공유하는 경우가 있으므로 주의해야 함.

 

 

* JavaScript에서 사용하기

- JavaScript에서 Web Storage를 다루려면 아래와 같이 스토리지 오브젝트를 구해야 함.

 

로컬 스토리지의 경우

var st = window.localStorage;

 

세션 스토리지의 경우

var st = window.sessionStorage;

 

- 그 후의 처리는 로컬 스토리지와 세션 스토리지가 똑같음.

- 값을 저장하는 경우는 setItem() 메서드를 사용함.

 

st.setItem("name", "Yumina");

                키          값

 

st.name = "Yumina"; 또는 st["name"] = "Yumina";로 써도 됨.

 

- 값을 구하는 경우는 getItem() 메서드를 사용함.

 

var name = st.getItem("name");

 

var name = st.name; 또는 var name = st["name"];으로 써도 됨.

 

- 키와 값 세트를 삭제하려면 removeItem() 메서드를 사용해야 함.

- 또한 모든 키와 값을 삭제하려면 clear() 메서드를 사용해야 함.

 

st.removeItem("name");        // 한 항목 삭제

st.clear();                           // 전부 삭제

 

 

* 다른 창과의 동기

- Web Storage가 변경되면 웹 브라우저의 다른 탭이나 창에 이벤트가 보내짐.

- 이 이벤트가 발생했을 때 데이터를 읽어 들이면 창끼리도 내용을 동기화시킬 수 있음.

 

 

* Storage 이벤트

- 다른 창이나 탭에서 Web Storage가 변경되었다는 것을 알리려면 storage 이벤트의 이벤트 핸들러를 작성해야 함.

- 이벤트 오브젝트에는 아래와 같은 프로퍼티가 있음. (모두 읽기 전용)

 

이름	내용
key	갱신 또는 추가된 키
oldValue	갱신 전 값
newValue	갱신 후 값
url	키가 변경된 페이지의 URL
storageArea	영향을 받은 스토리지 오브젝트

 

[지원 상황]

 

	IE	Firefox	Opera	Safari	Chrome
webStorage	O	O	O	O	O

 

 

내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)