[html][JavaScript] localStorage

HTML 5 명세에는 localStorage라는 내부 저장소가 있습니다.

localStorage는 Window객체에 정의된 property입니다.  whatwg명세

브라우저 지원 현황입니다. (Opera Mini는 지원하지 않습니다)

localStorage는 각각의 origin당 개별 공간이 유저의 로컬저장소에 주어집니다. 

origin은 한국어로 "기원"이라는 말입니다. 현재 이 페이지에서 document.origin을 출력하면, "http://graykick.tistory.com/" 이 출력될것 입니다.

사용 예제를 보겠습니다. 

window.onload = function() {
  if (window.localStorage && window.localStorage.getItem("nick")) {
    document.getElementById("nick").value = localStorage.getItem("nick");
  }
}
 

위 코드는 client에서 페이지가 로드되면, 해당 origin의 localStorage에 "nick"이라는 키 값을 가진 데이터가 있는지 확인합니다.

그리고 있다면, 그 key에 대한 value를 html element에 대입하는 코드입니다.

if (window.localStorage) {
    //  localStorage.nick = nick.value;
      localStorage.setItem("nick",nick.value);
}

위 코드는 element에 입력된 값을 localStorage에 저장하는 코드입니다. 

그 결과는 이렇습니다. 

처음에 text Input에 닉네임을 적고 play버튼을 누르면 localStorage에 데이터를 저장하게 됩니다.(setItem())

그뒤 다시 f5를 눌러 페이지를 리로드하면, 아까 입력한 i'm like tt가 입력되어 있습니다.

예제에서는 localStorage에 정의되어 있는 setItem메소드와 getItem메소드를 살펴보았습니다.

그외에도 다양한 메소드를 제공합니다.

clear()

localStorage를 초기화 합니다. 즉 storage에 저장된 모든 데이터를 삭제합니다. 

localStorage.setItem("momo", "i love momo");
localStorage.setItem("sana", "i love sana");
console.log("before clear : " + localStorage.length);
 
localStorage.clear();
console.log("after clear : " + localStorage.length);
// before clear : 2
// after clear : 0

key()

localStorage의 데이터들을 순서 index를 가지고 접근할 수 있습니다.

여기서 localStorage의 length 속성은 localStorage가 가지고있는 Item의 갯수입니다.

 for (var i = 0; i < localStorage.length; i++) {
    callback(localStorage.key(i));
 }
 

removeItem()

localStorage의 데이터를 key값을 가지고 삭제합니다.

localStorage.clear();
localStorage.setItem("momo", "i love momo");
localStorage.setItem("sana", "i love sana");
console.log("before remove : " + localStorage.length);
 
localStorage.removeItem("sana");
console.log("after remove : " + localStorage.length);
// before remove : 2
// after remove : 1

getItem()

localStorage의 데이터를 key값을 가지고 조회합니다.

localStorage.setItem("momo", "i love momo");
localStorage.setItem("sana", "i love sana");
console.log("get test : "+ localStorage.getItem("momo"));
 
// get test : i love momo

setItem()

localStorage에 key와 value를 가지고 저장합니다.

localStorage.setItem("momo", "i love momo");
localStorage.setItem("sana", "i love sana");
 
//key : momo, value : i love momo

localStorage에 데이터를 저장하는 다른 방법은 localStorage객체에 직접  " . " 연산자를 사용하여서도 저장이 가능합니다.

그러나 이는 추천되지않는 방법입니다. setItem메소드를 사용하면, 문제가 발생했을 경우 exception을 throw하며, setItem을 사용하는 것이 보안 측면에서도 더 안전하다고 합니다.

// http://stackoverflow.com/questions/13092715/localstorage-use-getitem-setitem-functions-or-access-object-directly

또한 window phone 7에서는 " . "을 사용한 저장이 지원되지 않는다고 하는데, 이는 테스트를 해보지 못했습니다.