[HTML5] WebStorage (LocalStorage / SessionStorage)

| Web Storage란?

- Client에 소량의 데이터를 저장해 두기 위한 Key-Value Storage

- 쿠키와 동일하게 도메인마다 Storage가 생성되며 동일 도메인 내에서만 조회 및 생성이 가능하다.

- 서로 다른 도메인의 데이터 조작은 막지만 클라이언트는 저장된 값을 임의로 수정할 수 있다

- 저장공간은 모바일 2.5MB, 데스크탑 5~10MB  (브라우저, 디바이스마다 상이함)

- 데이터의 지속성에 따라 Local Storage와 Session Storage로 나뉨

 

| Cookie / Web Storage 차이점

- 쿠키는 4KB밖에 저장할 수 없고 도메인별로 최대 저장개수가 20개의 제약사항이 있다.

- 모든 쿠키정보를 HTTP요청시 서버에 전송하기 때문에 서버에서 사용할 일이 없다면 불필요한 트래픽이 될 수 있다..

- 쿠키는 서버에서 읽을 수 있으나 Web Storage는 서버에 전송하지 않기 때문에 액세스가 불가능하다.

- 쿠키는 문자열만 저장가능하나 Web Storage는 구조화된 객체 데이터도 저장 가능하다.

- Web Storage를 위한 HTML5 API를 대부분의 브라우저에서 지원하나 쿠키가 조금 더 범용적인 표준을 따라간다.

 

1. Local Storage (영구적)

- windows 전역 객체의 localStorage collection을 통해 저장/조회가 이루어진다.

- 명시적으로 지우지 않는 한 영구적으로 저장된다.

- Cookie를 이용한 기능을 대체하기에 적당하다. EX) 오늘 하루 보지않기, 최근 검색한 목록 등

 

2. Session Storage (일시적)

- windows 전역 객체의 sessionStorage collection을 통해 저장/조회가 이루어진다.

- window 객체와 같은 유효범위와 유지기간을 가진다.  즉 브라우저(window)가 종료될때 sessionStorage도 삭제된다.

- 같은 도메인이라도 window마다 별도로  sessionStorage가 생성 된다.

- window.open으로 브라우저 생성시 물리적으로는 새창이지만 최초 생성시 세션스토리지값을 "복제"해서 생성해주고 이후 독립적으로 동작한다.

  

>> Local Storage와 Session Storage 모두 Storage interface를 구현했기 때문에 공통적인 메소드로 사용한다.

 

| Storage interface 표준  

interface Storage {
  readonly attribute unsigned long length;
  DOMString? key(unsigned long index);
  getter DOMString? getItem(DOMString key);
  setter void setItem(DOMString key, DOMString value);
  deleter void removeItem(DOMString key);
  void clear();
};

 length                        Storage에 저장되어 있는 key의 수 반환

 key(index)                   지정된 index의 key를 반환 ( 키가 없으면 null 반환 )

 getItem(key)                지정된 key의 value를 반환

 setItem(key, value)        Storage에 지정된 key로 value를 저장

 removeItem(key)          지정된 key를 삭제

 clear()                         모든 key를 Storage에서 삭제

 

| 샘플 소스 

// localStorage 지원여부
if(('localStorage' in window) && window['localStorage'] != null){
    alert('localStorage 지원!');
}else{
    alert('localStorage 지원 안함');
}

//////////////// 저장 /////////////////
localStorage.setItem("key1", "value1");
localStorage.key2 = "value2";
localStorage["key3"] = "value3";


//////////////// 읽기 /////////////////
var key1_value = localStorage.key1;             // value1
var key2_value = localStorage["key2"];          // value2
var key3_value = localStorage.getItem["key3"];  // value3


//반복문을 이용해 localStorage에 저장된 모든 데이터를 조회
for(var i = 0; i < localStorage.length; i++){
    var key = localStorage.key(i); // 해당 index의 key 반환, key가 없으면 null 반환 
    var value = localStorage[key]; // 
    console.log("i="+i+" / key="+ key +" / value="+value);
}
/*
i=0 / key=key1 / value=value1
i=1 / key=key2 / value=value2
i=2 / key=key3 / value=value3
*/

//////////////// 삭제 /////////////////
localStorage.removeItem("key3");
delete localStorage.key1;
delete localStorage["key2"];

| Reference  

https://www.w3.org/TR/webstorage/

https://www.w3schools.com/html/html5_webstorage.asp

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

https://developer.mozilla.org/en-US/docs/Web/Events/storage

https://developer.mozilla.org/en-US/docs/Web/API/StorageEvent

http://unikys.tistory.com/352

Web Storage (Second Edition)