web storage

쿠키와 같은 역할을 한다.

html 5에서 나온 기능

쿠키와는 다르게 각 윈도우에 독립적인 값을 저장할 수 있다.

여기서 윈도우란. 각 페이지를 보여주는 창이다.

자바스크립트의 window 객체라 생각하자.

자바스크립트로 조작한다.

 

웹 스토리지의 특징

1. 문자열만 저장 가능

2.  맵 형식의 데이터로 저장

 

A>종류

- 윈도우에 웹페이지가 로드되면

  세션 스토리지와  로컬 스토리지가 자동 생성된다.

 

1. 세션 스토리지

- 윈도우에 웹 사이트가 로드 될 때 생성됨

- 윈도우마다 세션 스토리지 별도 생성

- 현재 띄워져 있는 탭에서만 유지가 됨

- 로드된 웹사이트의 모든 웹페이지들이 스토리지 공유 

  (= 다른 웹사이트도 세션 스토리지에 접근 가능)

- 윈도우 닫힐 때 소멸됨

 

 

 

 

2. 로컬 스토리지

- 윈도우에 상관없이 웹 서버당 하나 생성됨

- 모든 탭과 창에서 공유

- 브라우저를 종료하거나 컴퓨터가 꺼져도 존재

- 같은 오리진(ip,포트,프로토콜)간에서 공유 

- 오리진이 다른 웹 사이트는 로컬 스토리지에 접근 불가

 

 

B> 제어

storage  인터페이스

- length와 [key: value] 프로퍼티를 가지고 있다.

- 메소드 

   - key(index)

   - setItem(key, val)

   - getItem(key)

   - removeItem(key)

   - cleaer()

 

예시

-스토리지 지원 확인

if(!window.seseionStorage){

    alert('세션 스토리지 없음');

}

 

- 아이템 저장 

sessionStorage.setItem("score","80");

sessionStorage["score"] = '80';

 

C< 스토리지 이벤트 

웹 스토리지 변경 시 발생

window 객체만 이벤트를 받을 수 있다.

 

1; StorageEvent 객체

프로퍼티 : key : 변화가 발생한 아이템의 키 , clear() 실행시 null

              newValue

              oldValue: 변화가 발생한 아이템의 이전 값, clear나 새로운 아이템 추가될 때는 null

              storageArea : 이벤트 발생한 웹 스토리지 객체

              url: 이벤트 유발한 웹 페이지 url

 

 

2.이벤트 처리

window.addEventListener('storage',storageEventListner,false);

function storageEventListener(e){

    이벤트 처리 루트
}