Storage - 저장소

기존의 자바스크립트는 쿠키를 사용하는 방법 이외에도 수많은 방법을 사용해서 데이터를 저장하고자 노력했습니다. 플래시 저장소를 사용하거나 각각의 브라우저에 존재하는 특수한 저장소를 사용했습니다. 데이터를 오래 지속하는 것은 애플리케이션을 만들 때 꼭 필요한 기능이므로 HTML5부터는 저장소 기능을 기본으로 제공합니다. 저장소 기능은 다음 브라우저 버전부터 사용 가능합니다.

  1. 인터넛 익스플로러8
  2. 파이어폭스 3.5
  3. 사파리 4.0
  4. 크롬 4.0
  5. 오페라 10.5

저장소는 로컬 저장소와 세션 저장소 두 가지로 나뉩니다. 각 저장소의 특징을 정리하면 다음과 같습니다. 두 저장소는 사용 방법이 같으므로 여기서는 로컬 저장소만 알아보겠습니다.

  1. 로컬 저장소: 웹 브라우저를 삭제하지 않는 이상 데이터를 영구적으로 저장합니다.
  2. 세션 저장소: 웹 브라우저가 종료될 때까지 데이터를 저장합니다.

두 저장소 모두 window 객체 안에 들어 있습니다. 아래의 예제 소스의 방법을 사용해서 사용자가 이용하는 브라우저가 저장소를 지원하는지, 지원하지 않는지 알 수 있습니다.

							$(document).ready(function(){
								// 로컬 저장소를 사용합니다. 
								if (window.localStorage) {
									
								}else {
									alert('로컬 저장소를 사용할 수 없는 브라우저입니다.');
								}
							}); 
						

상기의 소스 코드를 보면 jQuery를 추가했습니다. 단순히 문서 객체를 쉽게 다루려고 추가한 것입니다. jQuery와 저장소와는 관계가 없습니다. 저장소가 jQuery의 기능인지 헷갈릴 수 있으므로 문서 객체를 다루는 것을 제외하고는 전부 기본 자바스크립트를 사용하겠습니다.
여기서는 간단히 저장소를 사용해서 데이터를 저장하고, 새로고침하거나 브라우저를 종료했다 켰을 때 데이터를 유지하는 것을 확인하는 예제를 작성합니다. 데이터를 입력하고 데이터를 확인할 수 있게 아래처럼 간단한 HTML을 구성합니다.

이어서 아래 소스 코드처럼 printLocalStorage() 함수를 만듭니다. 이 함수를 사용하면 localStorage 객체 내부에 있는 데이터를 div 태그에 추가합니다. 로컬 저장소는 일반 객체처럼 사용합니다. 객체처럼 내부에서 쉽게 데이터를 뽑아낼 수 있고 쉽게 데이터를 추가할 수 있습니다.

							$(document).ready(function(){
								// 로컬 저장소의 내용을 출력합니다.
								function printLocalStorage () {
									// div#output 태그를 비웁니다.
									$("div#output").empty();

									// #output 태그에 로컬 저장소의 내용을 출력합니다.
									for (var key in localStorage) {
										$("<h5></h5>").html(key+ ': '+localStorage[key]).appendTo('div#output'); 
									}
								}
								
								// 로컬 저장소를 사용합니다. 
								if (window.localStorage) {
									
								}else {
									alert('로컬 저장소를 사용할 수 없는 브라우저입니다.');
								}
							}); 
						

상기의 소스처럼 객체 방식으로 데이터를 생성하고 읽는 사용방법이 있고, 아래 표의 localStorage 객체의 메서드를 사용해서 데이터를 생성하고 읽고 제거할 수 있습니다. 숫자나 불리언을 저장해도 저장소에는 무조건 문자열로 저장되므로 주의하세요.

localStorage 객체의 메서드

localStorage 객체의 메서드
메서드 이름 설명
setItem(key, value) 로컬 저장소에 데이터를 생성합니다.
getItem(key) 로컬 저장소의 데이터를 읽습니다.
removeItem(key) 로컬 저장소의 데이터를 삭제합니다.
clear() 로컬 저장소의 모든 데이터를 삭제합니다.
key(number) 로컬 저장소의 특정 위치의 데이터를 읽습니다.

이제, 아래 코드처럼 이벤트를 연결합니다. 버튼을 누르면 입력 양식에서 키와 값을 읽어 로컬 저장소에 추가합니다. 이어서 로컬 저장소의 내용을 출력합니다.

여기에서 다룬 내용을 아래의 코드처럼 세션 저장소로 바꿔보세요. 같은 메서드를 가지므로 쉽게 사용할 수 있을 것입니다.

							$(document).ready(function(){
								// 로컬 저장소를 사용합니다. 
								if (window.sessionStorage) {
									
								}else {
									alert('세션 저장소를 사용할 수 없는 브라우저입니다.');
								}
							}); 
						

세션 저장소는 로컬 저장소와 반대로 영구적으로 저장되는 곳이 아닙니다. 브라우저를 종료할 때 데이터가 모두 사라집니다.