[JavaScript] 저장소 사용하기[JavaScript] 저장소 사용하기

Posted at 2018. 9. 7. 15:51 | Posted in JavaScript & jQuery/JavaScript
반응형





■ localStorage를 사용한 저장소 기능 사용하기



-. 기존의 자바스크립트는 쿠키를 사용하는 방법 이외에도 수많은 방법을 사용해 데이터를 저장하고자 노력했다.

-. 이전에는 플래시 저장소를 사용하거나 각각의 브라우저에 존재하는 특수한 저장소를 사용했다.

-. 데이터를 오래 지속하는 것은 애플리케이션을 만들 때 꼭 필요한 기능이므로 HTML5부터는 저장소 기능을 기본으로 제공한다.

-. 저장소는 웹 브라우저를 삭제하지 않는이상 데이터를 영구적으로 저장한다.



:: 저장소 기능을 지원하는 브라우저 ::

 인터넷 익스플러(Internet Explorer)

 8 이상

 파이어 폭스(Fire Fox)

 3.5 이상

 사파리(Safari)

 4.0 이상

 크롬(Chrome)

 4.0 이상

 오페라(Opera)

 10.5 이상



# 소스코드

<html>
<head>
<title>:: JavaScript 로컬 저장소 ::</title>
<script language="javascript">

    document.addEventListener("DOMContentLoaded", function() {

        if(window.localStorage) {

            // 해당 예제를 실행하기전 이전 clear( ) 메서드를를 사용하여 작성했던 저장소의 내용을 전부 삭제한다.
            localStorage.clear();
        }
        else {
            alert("로컬 저장소를 사용할 수 없는 브라우저입니다.");
        }
    });

    function printLocalStorage() {

        var output = "";

        // div 태그에 로컬 저장소의 내용을 출력한다.
        for(var key in window.localStorage) {
            output += "<p>";


            // getItem( ) 메서드를 이용하여 key 값의 value 값을 찾는다.
            output += key + " : " + localStorage.getItem(key);
            output += "</p>";
        }

        document.getElementById("output").innerHTML = output;
    }

    function saveLocalStorage() {

        // 변수를 선언한다.
        var key = document.getElementById("key").value;
        var value = document.getElementById("value").value;

        // setItem( ) 메서드를 이용하여 value값을 로컬 저장소에 저장한다.
        localStorage.setItem(key, value);

        // 데이터를 출력한다.
        printLocalStorage();
    }
</script>
</head>
<body>
    <input type="text" id="key" value=""/>
    <input type="text" id="value" value=""/>
    <input type="button" value="저장" onClick="saveLocalStorage();"/>
    <div id="output">
        <!-- 저장된 내용을 출력할 DIV 엘리먼트 -->
    </div>
</body>
</html>




# 출력결과





※ localStorage 객체의 메서드


메서드 이름

설명

 setItem(key, value)

 · 로컬 저장소에 데이터를 생성한다.

 getItem(key)

 · 로컬 저장소의 데이터를 읽어온다.

 removeItem(key)

 · 로컬 저장소의 지정한 key 값의 데이터를 삭제한다.

 clear()

 · 로컬 저장소의 데이터를 전부 삭제한다.

 key(number)

 · 로컬 저장소의 특정 순서의 데이터를 읽어온다.







반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] Audio 객체를 이용한 음악 재생  (0) 2018.09.27
[JavaScript] 현재 위치를 지도에 찍어주는 Geolocation  (0) 2018.09.13
[JavaScript] Session 데이터 읽고, 쓰기  (0) 2018.09.04
[JavaScript] Cookie 생성, 삭제 및 읽어오기  (4) 2018.09.03
[JavaScript] 전화번호 Hyphen(-)기호 자동 삽입  (7) 2018.08.21
//

티스토리툴바