[HTML5] 데이터 스토리지

언어로그/Html/Javascript/CSS 2011. 6. 26. 16:55



HTML5 학습 참고 사이트
W3School :  http://www.w3schools.com


웹브라우저 클라이언트 단에 사용자에게 편리한 기능을 제공하기 위해 데이터를 저장해야 할 경우가 있다.
예를  들어  쇼핑몰 사이트에서 로그인을 하지 않아도, 쇼핑을 하고 상품을 담아둘 수 있는 장바구니 기능을 생각해보자. 
장바구니에 담긴 상품들은 웹브라우저를 종료하고 나중에 다시 쇼핑물을 다시 방문했을 때도 상품항목이 남아있어서 
사용자는 편리하게 이어서 쇼핑을 할 수 있다. 

만일 매번 방문할 때마다 사용자의 쇼핑상품이 삭제되어 버린다면 상당히 번거로울 것이다. 이처럼 사용자에 기호 등과 
관련된 정보를 웹브라우저 클라이언트에 저장을 하면 사용자에게 편리한 기능을 제공할 수 있다.  이러한 요구사항을 
만족하기 위한 데이터 스토리지 메커니즘을 이 포스트에서 소개하겠다. 

Cookie를 사용하는  방식이 오래전부터 사용되어 왔으며,  HTML5에서는 쿠키의 단점을 보완하기 위해 웹 스토리지 API 와
웹SQL 데이터베이스 API를 제공한다. 이에 대해서 알아보자. 



1. Cookie
Netscape 사에서 개발했으며, 단순히 key와 value의 데이터쌍을 저장하는 텍스트 파일이다.  
Cookie 를 구성하는 데이터에는 name-value, expiry date, Domain and Path 가 있다 그 의미는 다음과 같다. 
name-value 
모든 쿠키는 name-value 쌍을 구성되며, 쿠키의 이름(name)을 통해 정보(value)를 읽을 수 있다. 

expiry date
쿠키가 폐기되는 유효기간. 명시하지 않으면 브라우저를 닫을 때 폐기된다. 만료일은 UTC(표준시)로 설정되야 한다. 

Domain and Path
도메인은 브라우저가 쿠키를 보낼 도메인 주소를 의미하며, Path는 쿠키를 활성화되는 도메인의 디렉토리를 지정한다. 

 쿠키는 자바스크립트 상에서 document.cookie 속성을 통해 접근할 수 있다.  아래의 코드를 보자. 

document.cookie = 'ppkcookie1=testcookie; expires=Thu, 2 Aug 2001 20:47:11 UTC; path=/'

document.cookie = 'ppkcookie2=another test; expires=Fri, 3 Aug 2001 20:47:11 UTC; path=/'

쿠키값을 설정할 때는 위에서와 같이 정해직 포맷에 맞춰  설정해야 한다.  순서는 다음과 같다. 

1 먼저 name-value 쌍을 설정한다
2 다음 세미콜론; 과 공백이 온다
3 다음으로 적절한 형식으로 만료일이 온다. 
4 다시 세미콜론과 공백이 온다
5 다음 path가 온다 

위의 예제에서 ppkcookie2의 값은 이전 쿠키값을 덮어 씌우지 않고 추가된다는 것에 주목하자. 

쿠키를 삭제하기 위해서는 오늘 날짜 이전으로 만료일을 설정하면 브라우저가 만료됐음을 확인하고 삭제한다. 
document.cookie 값 설정시 만료일을 -1로 설정하면 쿠키값이 즉시 삭제되며,  0으로 설정하면 브라우저를 닫을 때
삭제된다. 




2. 웹 스토리지

엄청나게 발전한 쿠키라고 생각할 수 있으며,  쿠키와 비슷하게 name=value 쌍으로 데이터를 저장한다. 
도메인당 최대 5Mb 를 지원하며 sessionStorage, localStorage 를 제공한다. sessionStorage는 브라우저가  닫히기까지(세션)
동안 유효하며,  localStorage 는 명시적으로 데이터를 지우지 않는 한 계속 남아있게 된다. 


브라우저별 웹스토리지 지원현황은 아래와 같이 최신버전의 브라우저 모두에서 지원하는 기능이다. 




* 파이어폭스는 현재 스토리지에 대한 보안정책을 다른 브라우저와 다르게 구현하여서 쿠키를 반드시 지원해야만 
스토리지 API를 사용할 수 있다고 한다. 그래서 쿠키를 사용가능한지 사전에 검사해야 한다. 


쿠키가 가용한지 검사하는 코드는 아래와 같이 쿠키를 하나 생성하고 값 읽기를 시도해봐서 가용한지를 확인할 수 있다. 
var cookieEnabled = (function() {
	var id = new Date().getTime();
	
	document.cookie = 'cookieprobe=' + id + ' ;path=/';
	
	return (document.cookie.indexOf(id) != -1);
})();



웹 스토리지 API 형태는 다음과 같다. 

속성
unsigned int length

메소드 
DOMString  key(unsigned int index)
any getItem(DOMString  key)
void setItem(DOMString key, data)
void removeItem(DOMString  key)
void clear()


데이터 저장 및 조회
sessionStorage.setItem(‘twitter’, ‘@rem’);
sessionStorage.twitter = ‘@rem’;

sessionStorage.getItem(‘cost’);
sessionStorage.twitter


key 메소드 사용
for (var i = 0; i < sessionStorage.length; i++) {
	alert(sessionStorage.key(i) + ‘=’ + sessionStorage.getItem(sessionStorage.key(i)));
}


데이터 삭제
removeItem 과 clear 함수를 사용할 수 있다. removeItem 은 지정한 key에 해당하는 아이템을 삭제하며,   clear 함수는 모든 
아이템을 삭제한다. 



문자열 이외 저장
웹 스토리지는 문자열 형태로 데이터를 저장하기 때문에 객체를 저장할 수 없다.  JSON를 사용해서 객체를 텍스트화하여
저장하고 다시 텍스트를 객체로 복원하는 방식으로 우회하여 사용해야 한다.  

JSON를 사용하여 객체화하고 복원하는 코드는 다음과 같다. 
function stringify() {
	var videoDetails = {
		author: '감우성',
		description: '무법자',
		rating: '5.51'
 	};
 
		
 	sessionStorage.setItem('videoDetails', JSON.stringify(videoDetails));
}

function parse() {
	var videoDetails = JSON.parse(sessionStorage.getItem('videoDetails') || 'null');
	alert(videoDetails.author + "\n" + videoDetails.description + "\n" +  videoDetails.rating);
}




 
3. 웹 SQL 데이터베이스

웹SQL 데이터베이스는 웹브라우저에 내장된 데이터베이스이며, 대량의 데이터를 관리하기에 유용하다. 
SQL 처리 후 콜백형태로 다음 실행내용을 전달하며 비동기 방식으로 동작하며,   서버가 아닌 로컬 데이터베이스를
사용하기 때문에 커넥션을 맺고 닫는 부분이 없다.  한 도메인에는 동일한 이름을 갖는 DB 버전은 하나만 존재한다. 
(현재  1.0 버전을 사용하는데 같은 이름의 DB가 있을 수 없다는 의미 같다. )
 데이터베이스 작업 간에 트랜잭션을 시작하고 그 콜백으로 SQL문을 수행하는 처리를 한다. 데이터 베이스 크기의
제한은 없지만 일반적으저 브라우저들이 5Mb의 크기로 제한한다. 


브라우저별 웹 SQL 데이터베이스의 지원현황은 아래와 같다. 
아직은 브라우저에서의 지원이 미비하기 때문에, 사용시 반드시 지원유무를 확인하는 처리를 해야한다는 것에 주의하자. 





데이터베이스를 조작하는 코드는 아래와 같다. 


DB 생성 및 Open / API 지원유무 확인하기
var db; 
if (window.openDatabase) {
	db = openDatabase(‘mydb’, ‘1.0’, ‘My first database’, 2 * 1024 * 1024);
}
openDatabase의 인자는 DB이름, 버전, DB에 대한 설명, DB 의 크기이다.
위 코드에서는 mydb 라는 이름의  2MB(2 * 1024 * 1024) 데이터베이스를 생성하였고,
window.openDatabase 속성을 확인하여  웹SQL 데이터베이스  API를 지원하는지 확인했다. 





SQL 실행
db.transaction(
    function(tx) {
  tx.executeSql(sql, [], function () {
  // 실행코드
  }); 
  },
  function(tx, error) { 
      alert(‘에러: ‘ + error.message);   
  }
});

function(tx,error) 함수는 transaction 실패시 실행되는 에러처리 함수로 옵션사항이다. 별도의 에러처리를 하지 않아도
된다면 명시하지 않아도 된다. 
또 executeSql(sql, [], function () {}) 함수는 실제로 SQL을 수행하는 함수로 필수 인자는 실행할 질의문 sql 인자 뿐이다. 
[] 는 SQL 의 와일드 카드 문자에 삽입할 파라미터를 담은 배열이며, function()은  SQL 을 수행후 후속 작업을 처리할 
함수이다. 





테이블 생성하기 
var db; 
if (window.openDatabase) {
	db = openDatabase(‘tweetdb’, ‘1.0’, ‘All my tweets’, 2 * 1024 * 1024); 
	db.transaction(function (tx) {
	tx.executeSql(‘CREATE TABLE tweets (id, date, tweet)’); });
}






데이터 삽입하기
function saveTweets(tweets) { 
	tweets.results.forEach(function (tweet) {
		db.transaction(function (tx) { 
			var time = (new Date(Date.parse(tweet.created_at))).getTime(); 
			tx.executeSql(‘INSERT INTO tweets (id, screen_name, ¬date, text) VALUES (?, ?, ?, ?)’, 
			[tweet.id, ¬tweet.from_user, time / 1000, tweet.text]);
			 					
		}); 
	});
}





데이터 조회하기 
var tweetEl = document.getElementById(‘tweets’); 

function show(amount) {
	db.transaction(function (tx) { 
		tx.executeSql(‘SELECT * FROM tweets’ + (amount != ‘all’ ? ‘ WHERE date > strftime(“%s”, “now”, “-’ + amount + ‘ minutes”)’ : ‘’), [], 
			function (tx, results) {
				var html = [], len = results.rows.length;
				for (var i = 0; i < len; i++) { 
					html.push(‘<li>’ + results.rows.item(i).text + ‘</li>’);
				}
				tweetEl.innerHTML = html.join(‘’); 
			}
		});
	});
}


위 SQL문에서 strftime(string format time) 함수는 sqlite 의 함수로 포맷팅 문자열에 맞게 날짜를 출려하는 함수이다. 
위 코드에서는 amount가 all 아니면 현재시간(now)에서 amount 분만큼을 뺀 값을 1970-01-01 이후 경과한 초(%s)로 나타내고있다.

다음 링크에서 함수에 대한 설명을 참고하자 :  SQLite

 


데이터 조회시에는 다음과 같은 속성을 사용할 수 있다.

insertId :  삽입시에만 사용
rowAffected : select 조회시에는 이 값은 0임
rows : 컬렉션. rows 객체를 사용해
results.rows.item(i).screen_name 형태로 필드값을 가져올 수 있음. 
results.rows.length 로 컬렉션의 길이를 알수 있음. 




 
 

'언어로그 > Html/Javascript/CSS' 카테고리의 다른 글

HTML5 Canvas API  (0) 2012.03.11
jquery 간략한 사용법  (0) 2011.10.15
[HTML5] 데이터 스토리지  (0) 2011.06.26
HTML 소개  (0) 2011.06.13
, , ,
트랙백 0개 , 댓글 0개
1 ··· 79 80 81 82 83 84 85 86 87 ··· 212

티스토리툴바