[JS] 로컬 스토리지(LocalStorage)

2018-06-06

스토리지(Storage)

자바스크립트 개발을 하다보면 스토리지가 필요할 때가 있다. 스토리지에 대해 알아보자.

HTML5에서 추가된 로컬 스토리지는 window 객체의 하위 객체로, 영구 저장인 로컬 스토리지와 브라우저 실행 중에만 유효한 세션 스토리지라는 두 가지 저장 방식을 제공한다.

스토리지 종류

구분	유효기간
localStorage	없음(영구적)
sessionStorage	브라우저 탭이 열려 있는 동안만 유효하며 종료 시 삭제됨

로컬 스토리지와 세션 스토리지는 유효 기간 외에는 사용하는 데 큰 차이가 없으므로 로컬 스토리지에 대해 알아보자.

key와 value

로컬 스토리지의 저장은 키와 값의 형태로 이루어진다. 키는 저장된 값을 식별하고 가져오는 데 사용되고 원하는 만큼 로컬 스토리지에 키를 저장할 수 있다. 반대로 키를 가져올 때는 조회하려는 키 값으로 요청한다. 할당된 키에 저장되는 값은 숫자, 문자열 또는 객체(JSON)나 배열 같은 형태로 저장할 수 있다.

데이터 저장 및 조회하기

데이터를 저장하고 조회하기 위해 사용되는 메서드와 속성을 정리해 보고 예시를 살펴보자.

로컬 스토리지 메서드 및 속성

이름	구분	쿠키
setItem(key, value)	메서드	해당 키 값으로 데이터를 저장한다.
getItem(key)	메서드	해당 키 값의 이름을 가진 데이터를 가져온다.
removeItem(key)	메서드	해당 키 값의 이름을 가진 데이터를 삭제한다.
key(index)	메서드	해당 인덱스 값을 가진 키의 이름을 가져온다.
clear()	메서드	모든 데이터를 삭제한다.
length	속성	저장된 데이터 수를 가져온다.

인터넷 익스플로러에서 테스트 시 주의할 점

인터넷 익스플로러의 경우 로컬 실행 환경에서 스토리지 기능이 작동하지 않는다. 반드시 서버 실행 환경에서 URL로 지정해야만 확인할 수 있으므로 주의해야 한다.

데이터 저장 및 조회

// 저장
localStorage.setItem('name', 'jess2');

// 조회
var getValue = localStorage.getItem('name');
console.log(getValue); // jess2

로컬 스토리지에 name이라는 키 값으로 jess2라는 값을 저장한 다음 다시 저장한 키 값으로 데이터를 조회한다.

크롬 개발자 도구의 스토리지 확인

크롬 개발자 도구에서 Application탭을 클릭하면 Storage > Local Storage에 저장한 데이터의 키와 값을 확인할 수 있다. 데이터 삭제도 다음과 같이 removeItem()메서드로 간단하게 처리할 수 있다.

1	localStorage.removeItem('name');

사용자 환경 설정 구현하기

애플리케이션을 실행할 때 서버에 저장하지 않아도 되는 환경 설정을 로컬 스토리지에 저장하면 편리할 뿐만 아니라 서버와의 통신할 필요가 없으므로 성능상으로도 이점이 있다.

다음은 글상자 속의 글자색과 배경색을 저장하고 다시 불러오는 예제이다. 주요 선택자와 속성 변경 부분은 제이쿼리로 작성했다.

<body>
    <textarea name="txt" id="txt" cols="30" rows="10"></textarea><br/>
    <label for="textcolor">change text color</label>
    <input type="color" id="textcolor"/><br/>
    <label for="bgcolor">change bg color</label>
    <input type="color" id="bgcolor"/><br/>

    <button id="set_color">set color</button> <!--색상 설정 저장 버튼-->
    <button id="get_color">get color</button> <!--색상 설정 읽기 버튼-->

    <script>
        //글 상자에 글자를 입력
        $('#txt').val('글상자 영역의 색상 값을 저장합니다.');

        //글자색 변경 시 글상자의 글자색에 적용
        $('#textcolor').change(function(){
            var color = $(this).val();
            $('#txt').css('color', color);
        });

        //배경색 변경시 글상자의 배경색에 적용
        $('#bgcolor').change(function(){
            var color = $(this).val();
            $('#txt').css('backgroundColor', color);
        });

        //글자색과 배경색을 로컬 스토리지에 저장
        $('#set_color').click(function(){
            var bgcolor = $('#bgcolor').val();
            var textcolor = $('#textcolor').val();
            var obj = {
                bgcolor : bgcolor,
                textcolor : textcolor
            }
            localStorage.setItem('color', JSON.stringify(obj));
        });

        //로컬 스토리지에 저장한 환경 설정을 읽어 오기
        $('#get_color').click(function(){
            var color = JSON.parse(localStorage.getItem('color'));
            $('#txt').css({
                'backgroundColor' : color.bgcolor,
                'color' : color.textcolor
            });
        });
    </script>
</body>

(줄 15~19) : color picker 입력 요소를 통해 색상이 변경되면 텍스트 영역의 색상이 변경되도록 한다.
(줄 27~36) : 현재 컬러 입력 요소(글자색과 배경색)에 지정된 색상 값을 val()메서드로 읽어서 각각의 키 값(bgcolor, textcolor)을 지정해 로컬 스토리지에 저장한다.
(줄 31~35) : 자바스크립트에서는 데이터를 외부(웹 스토리지나 서버 등)와 주고받는 경우 JSON표준 형식을 이용한다. 데이터를 내보낼 경우에는 먼저 데이터를 문자열(string)로 변환해 주어야 한다. 따라서 객체 형태의 데이터를 스트링으로 변환하기 위해 JSON.stringify()메서드를 사용해 문자열로 변환시켜 저장한다.
(줄 38~45) : 환경 설정으로 저장한 로컬 스토리지의 키 값으로 글상자 #txt의 색상 값을 읽어 와 다시 글상자에 스타일로 적용한다.
(줄 40) : JSON.parse()를 이용해 문자열을 객체로 변환하여 가져온다. 이러한 형식은 자바스크립트 뿐만 아니라 독립적인 데이터 포맷(JSON)으로 다양한 프로그래밍 언어에서 표준(AJAX 통신)으로 사용된다.

실행결과

See the Pen yEJRdO by SoyeonJung (@je_ss2) on CodePen.

색상을 선택한 뒤 set color를 클릭하면 로컬스토리지에 선택한 색상이 저장된다. 새로고침을 하거나 색상을 변경한 뒤에 get color를 클릭하면 로컬 스토리지에 저장되었던 색상을 읽어온다.

제씨의 기술블로그

FrontEndJavaScript