Skip to main content

YDN-DB 브라우저 로컬저장소에 저장하기

오랜만에 포스트를 남깁니다.

데이터베이스를 이용한다면 보통은 서버 설치해서 Server-side기준으로 운영하게 됩니다.

그렇지만 간혹 용도에 따라 사용자의 개인적인 데이터를 저장해두어야할 필요가 있을 때가 있습니다.
(쿠키도 가능하지만 용량이 작아서 ;; )

(지금 당장 생각나는 예는 없지만 ;; )

HTML5 표준에 따르면 sqlite를 이용한 브라우저, 내장 DB가 크롬브라우저에도 내장(IndexedDB)되어있고 파이어폭스는 webstoreage(?) 등
을 사용합니다. 그렇다보니 웹의 특성상 여러가지 브라우저에서 동일하게 동작하는 것이 좋은데 그렇지 못한 경우가 생깁니다.
특히 낮은 버전의 브라우저는 지원되지 않아 아쉬움이 많습니다.
그래서 YDN-DB를 써볼까 합니다. ^^ (다른 프로젝트에 사용해봤었는데 생각보다 괜찮습니다. )

YDN-DB의 공식 홈페이지는 https://dev.yathit.com/ydn-db 입니다.

YDN-DB에서 지원하는 브라우저는 다음과 같습니다.

– Chrome 4+ (IndexedDB or WebSql)
– Firefox 3+ (IndexedDB draft), Firefox 10+ (IndexedDB)
– IE 6 (userdata), IE7+ (localStorage), IE10+ desktop/mobile (IndexedDB)
– Safari 3.1+ desktop/mobile/iOS web client (WebSql)
– Android web client, Android browser 2.1+ (WebSql), 4+ (IndexedDB)

– Opera 10+ (WebSql), Opera 15+ (IndexedDB)

현재 널리 사용되고 있는 왠만한 브라우저는 다 지원하고 있으니 해볼만하지 않을까요 ^^
추가하자면 IE에서는 용량제한이 있다고 합니다. IE6에서 1Mb IE7,8,9에서 5M 까지만 저장….

YDN을 이용하여 간단한 LIST샘플을 만들어 보았습니다.

http://jusun.org/example/ydn-db

익숙한 SQL을 사용하여 데이터를 컨트롤하면 좋겠지만…
nosql 쿼리 처럼 객체를 정의하여 쿼리하게 되어있습니다.

가장 중요한 것이 스키마 입니다. 예제에서는 단순히 리스트처럼 만들었지만 실제로는 객체 밑에 겍체가 들어가는 자료구조도 가능합니다.
(자세한 내용은 공식홈페이지에서…)

스키마를 정의하고 그 스키마 기준으로 자료를 입출력할 수 있습니다.
(업데이트 함수도 따로 있는것 같긴한데 같은 ID로 등록하면 덥어쓰던거 같습니다. )

대부분 개발자들은 말로 하는것보다 코드 보는게 빠르지 않수 ? -ㅅ-)

<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="1.4.3-ydn.db-is-core-qry.js"></script>

<script type="text/javascript">
//스키마를 정의 해둠
var schema = {
	version:1,
	autoSchema:false,
	stores:[{
		name:"jusun_test",
		keyPath:"id",
		autoIncrement:true,
		indexes:[
			{name:'title'},
			{name:'memo'},
			{name:'date'}
		]
	}]
};

var db = new ydn.db.Storage('jusun_db', schema);


var addItem = function () {

	var data = {
		"title":$("input[name=title]").val(),
		"memo":$("input[name=memo]").val(),
		"date":Date()
	};

	db.put('jusun_test', data).fail(function(e) {
		console.error(e);
	});

	getAllItems();

	$("input[name=title]").val("");
	$("input[name=memo]").val("");
};

//삭제
var deleteItem = function (id) {
  db.remove('jusun_test', id).fail(function(e) {
    console.error(e);
  });

  getAllItems();
};


//전체 가져오기
var getAllItems = function () {
  $("#list li").remove();
  var df = db.values('jusun_test');

  df.done(function (items) {
    var n = items.length;
    for (var i = 0; i < n; i++) {
      console.log(items[i]);
	  renderList(items[i]);
	}
  });

  df.fail(function (e) {
    console.error(e);
  });
};

//화면에 그리기
var renderList = function (item) {
  var list = document.getElementById("list");
  var li = document.createElement("li");
  var a = document.createElement("a");
  var t = document.createTextNode(item.title + "---" + item.memo);

  a.addEventListener("click", function () {
    deleteItem(item.id);
  }, false);

  a.textContent = " [x]";
  li.appendChild(t);
  li.appendChild(a);
  list.appendChild(li)
};



db.onReady(function() {
  getAllItems();
});


</script></pre>
<h2>YDN-DB Example(jusun.org)</h2>
&nbsp;
<div>

&nbsp;

<input name="title" type="text" placeholder="title" />

&nbsp;

<input name="memo" type="text" placeholder="memo" />

&nbsp;

<input name="add" type="button" value="add" />

</div>

<div class="list">

<ul id="list"></ul>

</div>

오늘은 여기까지 입니다. ;;;

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.