Client-Side Storage in HTML5

Storage History

IE5.5 의 userData(2000 년 )

페이지당 128kb도메인당 1mb

Flash6 의 Local Share Object(02 년 )

• Flash8 에서 ExternalInterface 을 이용하여 JS 로 접근 가능 .(06 년 )

• 도메인당 100kb.• Flash 의 높은 설치율 .

Google Gears (07 년 )

• Firefox, IE 플러그인 .• SQLLite 임베디드 .• 크기에 제한 없음 .

Client-side Storage in HTML5

웹 어플리케이션에 적합한 API.

• Web StoragelocalStorage (sessionStorage)– Cookie, userData, LSO

• Web SQL Database– Google gears

• Indexed Database

Web Storage(DOM Storage)

Web Storage

• localStorage, sessionStoragelocalStorage.setItem("bar",”foo”); // 값 저장var foo = localStorage.getItem("bar"); // 값 반환

var foo = localStorage["bar"];localStorage["bar"] = foo;

localStorage.removeItem("bar"); // 값 삭제localStorage.clear(); // 모두 삭제localStorage.length ; // 저장된 수

Web Storage 특징

대부분의 브라우저에서 지원 .사용하기 쉽다 .유효기간이 없다 .용량이 크다 .오직 client 을 위한 Storage.브라우저간 공유 .문자만 저장 , 객체는 toString 한 결과 저장 .

{}->[object object], []->[object array]

Web Storage 지원 현황

• Internet Explorer 8 • Firefox 3.5• Safari 4• Google Chrome 4• Opera 10.50• iOS 2.0• Android 2.0

Web SQL Database

Web SQL DatabaseopenDB : function(){ this.db = openDatabase('AddressBook', '1.0', ' 데이터 베이스 ', (5 * 1024 * 1024));},createTable : function(){ this.db.transaction(function(tx){ tx.executeSql('CREATE TABLE contacts (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, name TEXT, email TEXT, cell TEXT)’); });},selectRow : function(){

this.db.transaction(function(tx){tx.executeSql('SELECT * FROM contacts where id = ?‘, // sql 구문

[“1”], // preparedstatement 문자 function(transaction, resultSet){ // 성공 콜백

for (var i = 0; i < resultSet.rows.length; i++) {console.log(resultSet.rows.item(i));

} }, function(transaction, error){ // 실패 콜백

console.log(error.message); });

});}

Web SQL Database 특징

Google gears 와 같음 .SQLLite 3.6.19 가 임베디드 .SQLLite 의 문법을 그대로 사용 .도메인당 5mb 를 제공 .단순한 API, 간단한 callback.

Web SQL Database 지원 현황

• Safari 4.0• Chrome 4.0• Opera 10.50• iOS 3.0• Android 2.0

고민

Web SQL Database 문제

• SQLLite 는 표준이 아님 .

• 업그레이드 문제 .

• 다른 디바이스 지원 문제 .

Indexed DB(Web Simple DB)

indexed Database-DB 생성

this.db =

window.mozIndexedDB.open(

"AddressBook",// 이름

" 책 관련 데이터 베이스“ // 설명

);

Address Book

Object Store 생성

var store = this.db.createObjectStore(

"contacts", // 이름

{"keyPath": "id"} //pk (in-line keys - 자동생성 , out-of-line keys - 직접 입력 )

//false ( 자동 증가 . firefox4 default false, w3c true)

);

Address Book

contracts

Data 등록

var writeTransaction = this.db.transaction(

[ "contacts" ],// 잠글 object store 명

IDBTransaction.READ_WRITE // Lock type (READ_ONLY, READ_WRITE)

//,30 timeout 밀리세컨드);

var store = writeTransaction.objectStore( "contacts" );

var id = parseInt(Math.random() * 100);

var writeRequest = store.add({

"name" : "mixed", "email" : "mixed@nhn.com", "cell":”0100003333”, "id" : id

});

AddressBook contracts

Id NameEmailcell

Data 등록

writeRequest.onsuccess = function(e){

console.log (writeRequest.result);//id

};

writeRequest.ontimeout = function ( e ) {

alert("timeout");

writeTransaction.abort();

};

AddressBook contracts

Id NameEmailcell

Data 검색

var store = readTransaction.objectStore( "contacts" );

var readCursor = store.openCursor();

readCursor.onsuccess = function ( e ) {

if ( readCursor.result ) {

console.log( readCursor.result); // 데이터 readCursor.result["continue"]();

}else{

console.log("end");

}

};

AddressBook contracts

Id NameEmailcell

Id NameEmailcell

Id NameEmailcell

Id NameEmailcell

Indexed Database 특징

Key/value 형태 .b-tree 데이터 구조 .보다 low 레벨을 지원 .Callback 패턴이 아니라 다양한 event

기반의 패턴 .속도가 빠름 .

커뮤니티 반응

Indexed Database 지원 현황

• Firefox4 beta 10• Chrome 11

활용 범위

• Web Storage : 검색 기록• Web DB : offline 일 때 저장하거나 검색 .–가계부 , 메일 , 캘린더 등…

한계

• 서버 , 로컬 두 군데서 데이터를 관리하여 무결성의 문제가 생김 .

• 보안 이슈로 인하여 활용도가 떨어짐 .• 더욱 복잡해지는 클라이언트 .• 진행 중인 API.

Reference• http://www.w3.org/TR/IndexedDB/

• http://diveintohtml5.org/storage.html

• http://en.wikipedia.org/wiki/Browser_wars#The_first_browser_war

• http://msdn.microsoft.com/en-us/library/ms531424(VS.85).aspx

• http://hacks.mozilla.org/2010/06/beyond-html5-database-apis-and-the-road-to-indexeddb/

• http://hacks.mozilla.org/2010/06/comparing-indexeddb-and-webdatabase/

• http://en.wikipedia.org/wiki/Web_Storage

• http://code.google.com/p/indexeddb/

• http://www.hotcleaner.com/web_storage.html

• http://antmicro.com/blog/2010/07/async-indexeddb-js-api-test/

• http://sites.google.com/site/usingindexeddb/

• https://developer.mozilla.org/en/IndexedDB

• http://mxr.mozilla.org/mozilla-central/source/dom/indexedDB/test/test_key_requirements.html?force=1#33

• http://nparashuram.com/trialtool/index.html#example=/ttd/IndexedDB/moz_indexedDB.html&selected=#db&

• http://html5doctor.com/introducing-web-sql-databases/

• http://uxebu.com/blog/2011/01/17/indexeddb-updates-ff4-09b/

• http://news.cnet.com/8301-30685_3-20000376-264.html?tag=mncol;title

• http://blogs.msdn.com/b/interoperability/archive/2010/12/21/indexeddb-prototype-available-for-internet-explorer.aspx

• http://blogs.msdn.com/b/interoperability/archive/2011/02/03/the-indexeddb-prototype-gets-an-update.aspx

• http://mikewest.org/2010/12/intro-to-indexeddb

• http://blog.submitmy.info/2010/04/html5-client-side-storage/

• https://developer.mozilla.org/en/IndexedDB/IndexedDB_primer