one-person developer

• 클라이언트 디스크에 소량에 데이터를 저장해 두기 위한 저장소
• 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>

선을 그릴땐 strokeStyle 속성, 채우기를 할땐 fillStyle 속성을 사용하여
색상이나 스타일을 지정한다.

<script type="text/javascript">
var canvas          = document.getElementById("canvas13");
var context         = canvas.getContext("2d");
    context.strokeStyle = "#0033FF";    // 선에 색상 지정하기
    context.beginPath();
    context.rect(0, 0, 110, 60); 
    context.stroke();
    context.closePath();
 
    context.fillStyle   = "#FFCC00";    // 채우기에 색상 지정하기
    context.beginPath();
    context.fillRect(5, 5, 100, 50); 
    context.stroke();
    context.closePath();
 
    context.strokeStyle = "#FF0000";    // 선에 색상 지정하기
    context.beginPath();
    context.arc(30, 30, 20, 0, 2 * Math.PI, true);
    context.stroke();
    context.closePath();
 
    context.fillStyle   = "#FF0000";    // 채우기에 색상 지정하기
    context.beginPath();
    context.arc(80, 30, 20, 0, 2 * Math.PI, true);
    context.fill();
    context.closePath();
</script>​