HTML5 Storage

* Web Storage :
   웹 작업 중 가장 중요한 것은 클라이언트 쪽에서 데이터를 저장할 수 있는 기능이다.
          Ex) cookie(일시적인 저장)
 
   1. KeyValuePair
   2. 세션 종료되어도 저장해 둔다. 
   3. cookie의 단점을 보완.
  * cookie 단점
  3-1) 저장용량 제한 (4K)
  3-2) 보안문제
  3-3) 동일 사이트에서 하나 이상의 탭(메뉴)를 열었을 때, 추적하기 힘들다.
 
 * Session Storage
   1. Data Save & Search
      // Save 
    sessionStorage.setItem(key, value);
      // Search
  var item = sessionStorage.getItem(key);
   2. Remove
         sessionStorage.removeItem(key);
                sessionStorage.clear();

 

 * Local Storage :
     1. Data Save & Search
      // Save 
    localStorage.setItem(key, value);
      // Search
  var item = localStorage.getItem(key);
   2. Remove
         localStorage.removeItem(key);
                localStorage.clear();

 

 * Storage Event
   1. 영역이 변경될 때 마다 발생. 몇 가지 속성을 지님.
    1-1)storageArea : 세션인지 로컬인지 알려줌.
  1-2)key  : 변경된 키
  1-3)oldValue : 키의 이전값
  1-4)newValue : 키의 새로운값
  1-5)url  : 키가 변경된 페이지의 url

 

** 세션 스토리지는 브라우저 종료시 값이 소멸되는데 반해, 로컬스토리지는 값이 남아있음을 아래 첨부한 샘플을 통해 확인하세요~

 

 

StorageSample.html