본문 바로가기
Study/HTML5,CSS,JQuery

[HTML5/CSS3/JQUERY] web storage

힝쏘 2019. 5. 22. 14:17

WEB STORAGE

(ie는 지원하지 않는다.)

 

클라이언트의 디스크에 소량의 데이터를 저장해 두기 위한 기억공간(쿠키와 비교)

키-값 쌍으로 자료를 저장하고 키를 이용하여 자료를 조회한다.

오프라인 웹 어플리케이션과 비슷하게 갑자기 전원이 꺼진다거나 다시 pc를 켰을 때

이전의 작업한 데이터를 보존할 수도 있고, 웹 메일을 web storage에 저장해 두었다가 읽는다거나,

서버의 많은 정보를 client에 저장해둘 수 있다.

그리고 용도에 따라서 local storage와 session storage로 나뉘는데, 

두 storage의 차이는 저장기간이나 유효 범위만 다를 뿐 대게 같은 API를 사용한다.

 

web storage는 client disk에 소량의 데이터를 저장하기 위한 storage로, 

이전까지는 cookie를 사용했지만 cookie와는 다음과 같은 몇가지 다른 점이 있다.

 

- 크기에 제한이 없다 : 쿠키는 4KB로 제한이 있지만 web storage는 제한이 없다.

- 서버로 보내지지 않는다 : 쿠키는 HTTP Request에 의해서 자동으로 서버에 전송이 되었지만 web storage는 서버로 전송되지 않는다.

- 유효기간의 제한이 없다 : 쿠키처럼 특정 기간이 지나면 자동으로 삭제되지 않는다.

- JavaScript 객체를 저장할 수 있다

 

LOCAL STORAGE

저장기간에 제약이 없고 web site의 도메인에 따라 생성되는 storage이다.

저장기간도 사용자가 삭제하기 전까지 영구적으로 저장할 수 있다. 

그렇기 때문에 기존의 쿠기를 이용한 저장작업을 local storage가 대신하기에 충분하다.

거기다 server 측과의 통신 작업도 없기 때문에 클라이언트들에게 이점이 많을 것이다.

 

SESSION STORAGE

local storage와 같이 도메인마다 생성이 되지만 browser window의 유효범위와 생존기간을 갖는다.

그래서 local storage와 다르게 browser window가 닫히면 session storage도 같이 삭제된다.

만약 browser window를 복제하면 복제된 순간까지는 session storage의 내용과 같겠지만,

이후의 내용은 서로에게 아무런 영향을 주지 않고 별개의 storage로 작동하게 된다.

이런 특징을 갖는 session storage는 사용자의 동작을 추적하여 기록할 때 사용할 수 있다.

 

STORAGE EVENT HANDLING

storage는 storage의 변경에 대해서 window 객체가 storage event를 발생시킨다.

하단은 event가 가지고 있는 속성들이다.

 속성

 설명

 key

 변경된 key, clear()가 호출되면 null를 반환한다. 

 oldValue

 변경되기 전의 값(복사본), 새로운 키값을 등록하였다면 null

 newValue

 변경된 후의 값(복사본), 값이 삭제되었을 때는 null 

 url

 event가 발생한 문서의 url 

 storageArea

 변경된 storage 참조 

 

 

 

 

storageTest1.html

 

 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> --> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 

        // 저장 
        $("#btn1").click(function() { 
            if (!window.localStorage) { 
                alert("현재 브라우저는 로컬 스토리지를 지원하지 않음"); 
            } else { 
                // 로컬 스토리지에 키-값의 형태로 저장하는 3가지 방법 
                localStorage.setItem("key1", "안녕");    // 방법1 
                localStorage.key2 = "Hi~";                // 방법2 
                localStorage["key3"] = "Hello~";        // 방법3 
            } 
        }); 
         
        // 삭제 
        $("#btn2").click(function() { 
            localStorage.removeItem("key1");    // key1 삭제 
        }); 
         
        // 전체삭제 
        $("#btn3").click(function() { 
            localStorage.clear();                // 전체삭제 
        }); 
         
        // 내용보기 
        $("#btn4").click(function() { 
            // 저장하는 방법이 3가지니까 가져오는 방법도 3가지이다. 
            alert(localStorage.getItem("key1")+", "+localStorage.key2+", "+localStorage["key3"]); 
        }); 
    }); 
</script> 
</head> 
<body> 
    <button id="btn1">저장</button><br/> 
    <button id="btn2">삭제</button><br/> 
    <button id="btn3">전체삭제</button><br/> 
    <button id="btn4">내용보기</button><br/> 
</body> 
</html>

 

 

 

storageTest2.html

 

 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> --> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
    var key, value, entries; 
     
    $(function() { 
        showAll(); 
         
        $("#save").click(function() { 
            save(); 
        }); 
        $("#remove").click(function() { 
            remove(); 
        }); 
        $("#entries").click(function() { 
            entrySelect(); 
        }); 
        $("#new_win").click(function() { 
            window.open(location.href); 
        }); 
    }); 
     
    function showAll() { 
        // 맨 먼저 시작하는 곳이라 값 정의해준 다. 
        key = document.getElementById("k"); 
        value = document.getElementById("v"); 
        entries = document.getElementById("entries"); 
         
        // 스토리지에 변경이 있으면 목록을 다시 표시한다. 
        // storage 이벤트가 발생하면 무조건 showAll() 호출 
        // localStorage 값이 변경되면 발생한다. 
        window.addEventListener("storage", showAll, false); 
        entries.innerHTML = ""; 
        for (var i=0; i<localStorage.length; i++) { 
            var k = localStorage.key(i);    // value 값 
            entries.options[entries.options.length] = new Option(k+":"+localStorage[k], k); 
        } 
    } 
     
    function save() { 
        // 헷갈리기 조심 - key.value => key의 값 / value.value => value의 값 
        localStorage[key.value] = value.value; 
        document.getElementById("k").value = ""; 
        document.getElementById("v").value = ""; 
        showAll(); 
    } 
     
    function remove() { 
        delete localStorage[key.value]; 
        document.getElementById("k").value = ""; 
        document.getElementById("v").value = ""; 
        showAll(); 
    } 
     
    function entrySelect() { 
        // select에서 클릭한 값이 key값으로 보여져야 한다. 
        var selectedOption = entries.options[entries.selectedIndex]; 
        key.value = selectedOption.value; 
        value.value = localStorage[selectedOption.value]; 
    } 
</script> 
</head> 
<body> 
    <h1>로컬 스토리지 뷰어</h1> 
    키: <input type="text" id="k"><br/> 
    값: <input type="text" id="v"><br/> 
    <button id="save">저장</button> 
    <button id="remove">삭제</button> 
    <button id="new_win">윈도우 생성</button> 
     
    <hr/> 
     
    <select id="entries" size="5"> 
    </select> 
</body> 
</html>

 

 

storageTest3.html

 

 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<!-- 글자색이나 배경색 저장하여 클릭하였을 때 지정된 색으로 변환 --> 
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> --> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
        load_setting(); 
         
        $("form#frm").submit(function(e) { 
            e.preventDefault(); 
            save_settings(); 
        }); 
    }); 
     
    function load_setting() { 
        var bg_color = localStorage.getItem("bg_color"); 
        var text_color = localStorage.getItem("text_color"); 
        var text_size = localStorage.getItem("text_size"); 
         
        $("#bg_color").val(bg_color); 
        $("#text_color").val(text_color); 
        $("#text_size").val(text_size); 
         
        // 실질적으로 적용 작업을 한다. 
        apply_data(); 
    } 
     
    function save_settings() { 
        localStorage.setItem("bg_color", $("#bg_color").val()); 
        localStorage.setItem("text_color", $("#text_color").val()); 
        localStorage.setItem("text_size", $("#text_size").val()); 
         
        apply_data(); 
    } 
     
    function apply_data() { 
        $("body").css("background-color", $("#bg_color").val()); 
        $("body").css("color", $("#text_color").val()); 
        $("body").css("font-size", $("#text_size").val()+"px"); 
         
    } 
</script> 
</head> 
<body> 
    <p>환경설정</p> 
    <form action="" id="frm"> 
        <fieldset id="colors"> 
            <legend>색상 선택</legend> 
            <ul> 
                <li><label for="bg_color">배경색</label><input type="text" value="" id="bg_color"/></li> 
                <li><label for="text_color">글자색</label><input type="text" value="" id="text_color"/></li> 
                <li> 
                    <label for="text_size">글자크기</label> 
                    <select id="text_size"> 
                        <option value="16">16px</option> 
                        <option value="20">20px</option> 
                        <option value="24">24px</option> 
                        <option value="26">26px</option> 
                    </select> 
                </li> 
            </ul> 
            <input type="submit" value="저장"/> 
        </fieldset> 
    </form> 
</body> 
</html>

 

저작자표시

'Study > HTML5,CSS,JQuery' 카테고리의 다른 글

[HTML5/CSS3/JQUERY] geolocation, geolocation map  (0) 2019.05.22
[HTML5/CSS3/JQUERY] web worker  (1) 2019.05.22
[HTML5/CSS3/JQUERY] application cache  (0) 2019.05.22
[HTML5/CSS3/JQUERY] channel message  (0) 2019.05.22
[HTML5/CSS3/JQUERY] cross message  (0) 2019.05.22

'Study/HTML5,CSS,JQuery' Related Articles

티스토리툴바