Web Storage (로컬 스토리지)

• 클라이언트 디스크에 소량에 데이터를 저장해 두기 위한 저장소
• Web Storage 등장이전 임시저장소로 Cookie를 사용
• 단순하게 키 – 값으로 구성
• Web Storage 종류로 ‘로컬 스토리지’, ‘세션 스토리지’ 두 가 스토리지 존재

웹 사이트 도메인마다 각각 별도로 생성되는 저장영역
a.vizooo.com, b.vizooo.com 도메인이 다르므로 각각 저장되어 지며,
a.vizooo.com가 b.vizooo.com에 로컬 스토리지에 접근할 수 없고,
반대에 경우에도 접근할 수 없음

스토리지 저장

localStorage[“키”] = “값”;
localStorage.setItem(“키”, “값”);

스토리지 삭제

delete localStorage[“키”];
localStorage.removeItem(“키”);

모든 스토리지 삭제

localStorage.clear();

스토리지 읽기

var val = localStorage[“키”];
var val = localStorage.getItem(“키”);

스토리지 루프 처리

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

예제)

<script type="text/javascript">
        /**
        *   스토리지 저장
        */
        function Save() {
            var key = document.getElementById("key");
            var val = document.getElementById("val");
            localStorage[key.value] = val.value;    // 로컬 스토리지에 데이타를 저장한다.
            ShowStorage();
        }
 
        /**
        *   스토리지 출력
        */
        function ShowStorage() {
            var storage = document.getElementById("storage");
                    storage.innerHTML = "";
            for(var i = 0; i < localStorage.length; i++) {
                var k = localStorage.key(i);    // 로컬 스토리지에 키값을 얻는다.
                storage.innerHTML += '<div>
' + k + ' : ' + localStorage[k] + '<input type="button" value="삭제"';
                storage.innerHTML += ' onclick="DeleteStorage(\'' + k + '\')"/></div>
';
            }
        }
         
        /**
        *   스토리지 삭제
        */
        function DeleteStorage(key) {
            delete localStorage[key];   // 로컬 스토리지에 key값에 해당하는 데이타를 삭제한다.
            ShowStorage();
        }
         
        /**
        *   스토리지 모든 데이타 삭제
        */
        function ClearStorage() {
            localStorage.clear();   // 로컬 스토리지를 전부 지운다.
            ShowStorage();
        }
    </script>
 
    <h1>로컬 스토리지</h1>
    키:<input id="key">
    값:<input id="val">
    <input onclick="Save()" type="button" value="저장">
    <input onclick="ClearStorage()" type="button" value="모두 삭제">
    <h3>로컬 스토리지 내역</h3>
    <div id="storage"></div>

 

 

 

안드로이드 게임들(Android games)