Client-Side Storage in HTML5 작성자 : 전용우 ( mixed@nhn.com) 작성년월일 : 2011/02/22 c 2010 NHN CORPORATION
목차 1. Storage History 2. Web Storage 3. Web Database 4. Indexed Database
1. Storage History
1.1 The First Browser War(95') 4 / Client-Side Storage in HTML5
1.2 userdata ( 도메인마다 64 KB) 5 / Client-Side Storage in HTML5
1.3 Local Shared Objects( 2002 Flash6) ( 도메인마다 100 KB) 6 / Client-Side Storage in HTML5
1.3 Google Gear( 2007 ) SQLite 을기반으로하는 SqlDB 데이터제한없음. 7 / Client-Side Storage in HTML5
1.4. HTML5 Web Storage Web Database 8 / Client-Side Storage in HTML5
2. Web Storage(aka DOM Storage)
2.1. Cookie 와비교 1. 사용하기쉽다. 2. 용량이크다.(5kb/5mb) 3. 서버에데이터를젂송하지않는다. 4. 유효기갂이없다. 10 / Client-Side Storage in HTML5
2.3. 지원현황 Internet Explorer 8 Firefox 3.5 Safari 4 Google Chrome 4 Opera 10.50 Iphone 2.0 Android 2.0 11 / Client-Side Storage in HTML5
2.2. localstorage 와 sessionstorage 차이 sessionstorage 는브라우저를닫으면사라지고 localstorage 는지속적으로남음. 12 / Client-Side Storage in HTML5
2.3. localstorage 메서드 localstorage.setitem("bar", foo ); // 값저장 var foo = localstorage.getitem("bar"); // 값반환 var foo = localstorage["bar"]; localstorage["bar"] = foo; localstorage.removeitem("bar"); // 값삭제 localstorage.key();// 마지막 key 값 localstorage.key(1);// 마지막에서두번째 key 값 localstorage.key(2);// 없으면 null localstorage.clear(); // 모두삭제 localstorage.length ; // 저장된수 13 / Client-Side Storage in HTML5
3. Web Database
3.1. Web Database SQLLite 을기반으로하는 브라우저에내장된 DB. 15 / Client-Side Storage in HTML5
3.2. 지원현황 Safari 4.0 Chrome 4.0 Opera 10.50 Iphone 3.0 Android 2.0 16 / Client-Side Storage in HTML5
3.2. Database 생성 opendb : function(){ this.db = opendatabase('addressbook', '1.0', ' 데이터베이스 ', (5 * 1024 * 1024)); } 17 / Client-Side Storage in HTML5
3.3. Table 생성. 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) ); }); }, 18 / Client-Side Storage in HTML5
3.4. Row 생성. insertrow : function(){ this.db.transaction(function(tx){ tx.executesql('insert INTO contacts (name, email, cell) VALUES (?,?,?)', ["mixed","mixed@nhn.com","000000"], function(transaction, resultset){ console.log("create row. id = %s",resultset.insertid); // 생성된 id }); }); }, 19 / Client-Side Storage in HTML5
3.4. Row Fetch. selectrow : function(){ this.db.transaction(function(tx){ tx.executesql('select * FROM contacts', [], function(transaction, resultset){ for (var i = 0; i < resultset.rows.length; i++) { console.log(resultset.rows.item(i)); } }); }); }, 20 / Client-Side Storage in HTML5
3.5. Row 수정. updaterow : function(){ this.db.transaction(function(tx){ tx.executesql('update contacts set cell=? Where id=?;', ["aaaaaa","3"], function(transaction, resultset){ console.log resultset.rowsaffected); // 변경된 row 수 }); }); }, 21 / Client-Side Storage in HTML5
3.6. Row 삭제. deleterow : function(){ this.db.transaction(function(tx){ tx.executesql('delete from contacts where id=?;', ["3"], function(transaction, resultset){ console.log("delete row"); }); }); } 22 / Client-Side Storage in HTML5
3.7. WebDB 의문제점 1. SQLLite 는표준 SQL92 를대부분지키긴했으나중요한일부분을빼먹었음. 2. SQLLite 는표준이아니라 HTML5 의표준정책에위반됨. 3. SQLLite 가 Upgrade 시문제가있음. 23 / Client-Side Storage in HTML5
4. IndexedDB(aka Web Simple DB)
4.1. IndexedDB 클라이언트에대용량데이터를저장하고 인덱스를이용하여보다빠르게찾는 API 25 / Client-Side Storage in HTML5
4.2. 왜 IndexedDB 인가? localstorage 는용량이작고구조화된 데이터를다루기엔부족. 26 / Client-Side Storage in HTML5
4.3. 지원현황? IE ( 플러그인 ) Firefox4 beta10 Chrome 11 Safari, Opera 미구현 27 / Client-Side Storage in HTML5
4.3. IndexedDB 의지원방식 동기접근 ( 미지원 -WebWork 을이용 ) 비동기접근 ( 지원 firefox4.b8 부터 ) - 각자실행되고 callback 로대답한다. 28 / Client-Side Storage in HTML5
4.4. IndexedDB 의 API API 설명 29 / Client-Side Storage in HTML5
4.5. IndexedDB 의 API DB 생성 DB 생성 30 / Client-Side Storage in HTML5
4.5. IndexedDB 의 API DB 생성 AddressBook 31 / Client-Side Storage in HTML5
4.5. IndexedDB 의 API DB 생성 this.db = window.mozindexeddb.open( "AddressBook",// 이름 " 책관련데이터베이스 // 설명 ); 32 / Client-Side Storage in HTML5
4.6. IndexedDB 의 API Object Store 생성 Object Store 33 / Client-Side Storage in HTML5
4.6. IndexedDB 의 API Object Store 생성 AddressBook contracts 34 / Client-Side Storage in HTML5
4.6. IndexedDB 의 API Object Store 생성 // 반드시버젂이변경되어야맊 ObjectStore생성및인덱스등을변경할수있음. var store = this.resultidbdatabase.createobjectstore( "contacts", // 이름 {"keypath": "id"} //pk // in-line keys - 자동생성, out-of-line keys - 직접입력 //false // 자동증가. firefox4 default false, w3c true ); 35 / Client-Side Storage in HTML5
4.6. IndexedDB 의 API Object Store 생성 var request = this.resultidbdatabase.setversion( parseint(math.random() * 100)); request.onsuccess = function(){ var store = this.resultidbdatabase.createobjectstore( "contacts", {"keypath": "id"} ); } 36 / Client-Side Storage in HTML5
4.6. IndexedDB 의 API Object Store 생성 var request = this.resultidbdatabase.setversion( parseint(math.random() * 100)); request.onsuccess = function(){ var store = request.result.objectstore("contacts"); store.createindex( "CellPhone", // 인덱스명 ); }.bind(this); "cell" false // 인덱스속성 // 중복여부 37 / Client-Side Storage in HTML5
4.7. IndexedDB 의 API Data manipulate Data manipulate 38 / Client-Side Storage in HTML5
4.7. IndexedDB 의 API Data manipulate AddressBook contracts Id Name Email cell 39 / Client-Side Storage in HTML5
4.7. IndexedDB 의 API Data manipulate var writetransaction = this.resultidbdatabase.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": id, "id" : id }); 40 / Client-Side Storage in HTML5
4.7. IndexedDB 의 API Data manipulate writerequest.onsuccess = function(e){ console.log (writerequest.result);//id }.bind(this); writerequest.ontimeout = function ( e ) { alert("timeout"); writetransaction.abort(); }; 41 / Client-Side Storage in HTML5
4.7. IndexedDB 의 API Data manipulate AddressBook contracts Id Name Email cell Id Name Email cell 42 / Client-Side Storage in HTML5
4.7. IndexedDB 의 API Data manipulate var writetransaction = this.resultidbdatabase.transaction( [ "contacts" ], IDBTransaction.READ_WRITE ); var store = writetransaction.objectstore( "contacts" ); var writerequest = store.delete(id); 43 / Client-Side Storage in HTML5
4.7. IndexedDB 의 API Data manipulate var request = store.get(id); request.onsuccess = function(event){ request.result.email = "i.nevalose@gmail.com"; var request2 = store.put(request.result); request2.onsuccess = function(){ console.log("modified"); } }.bind(this); 44 / Client-Side Storage in HTML5
4.8. IndexedDB 의 API Data Fetch Data Fetch 45 / Client-Side Storage in HTML5
4.8. IndexedDB 의 API Data Fetch AddressBook contracts Id Name Email cell Id Name Email cell Id Name Email cell Id Name Email cell 46 / Client-Side Storage in HTML5
4.8. IndexedDB 의 API Data Fetch var store = readtransaction.objectstore( "contacts" ); var request = store.get(this.id); request.onsuccess = function(event){ }; console.log(request.result); // 데이터 47 / Client-Side Storage in HTML5
4.8. IndexedDB 의 API Data Fetch var store = readtransaction.objectstore( "contacts" ); var request = store.getall(); request.onsuccess = function(){ } console.log(request.result); //data 배열 48 / Client-Side Storage in HTML5
4.8. IndexedDB 의 API Data Fetch 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"); } }; 49 / Client-Side Storage in HTML5
4.8. IndexedDB 의 API Data Fetch var store = readtransaction.objectstore( "contacts" ); var bounds = new IDBKeyRange.bound( 0, // 시작 10, // 끝 false, // 시작포함여부근데반대로되어있음. true // 끝포함여부 ); var readcursor = store.opencursor( bounds ); //IDBCursor.NEXT - 정방향 //IDBCursor.NEXT_NO_DUPLICATE 정방향이면서중복제외 //IDBCursor.PREV - 역방향 //IDBCursor.PREV_NO_DUPLICATE 역방향이면서중복제외 50 / Client-Side Storage in HTML5
4.8. IndexedDB 의 API Data Fetch var index = store.index("cellphone"); var bounds = new IDBKeyRange.bound(10, 90, false, false); var readcursor = index.opencursor( bounds ); 51 / Client-Side Storage in HTML5
4.8. IndexedDB 의 API Data Fetch var manipulatecursor = store.opencursor(); manipulatecursor.onsuccess = function ( e ) { if ( manipulatecursor.result ) { if(manipulatecursor.result.value.id%2 == 0){ manipulatecursor.result.delete(); }else{ manipulatecursor.result.value.name = " 젂용우 "; manipulatecursor.result.update( manipulatecursor.result.value); } manipulatecursor.result["continue"](); }else{ console.log("end"); } }; 52 / Client-Side Storage in HTML5
4.9. IndexedDB 의장점 1. WebDB는명시적으로 transaction을해야하지맊 IndexedDB는오브젝트단위로자동 transaction. 2. IndexedDB는오브젝트를넣을수있음. 3. cursor을이용하여보다빠르게얻어올수있음. 4. *lower* layer라사용자에게더맋은옵션을선택할수있게한다. 53 / Client-Side Storage in HTML5
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 54 / Client-Side Storage in HTML5
Thank you.