Your SlideShare is downloading. ×
Client side storage in html5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Client side storage in html5

595

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
595
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Client-Side Storage in HTML5
  • 2. Storage History
  • 3. IE5.5의 userData(2000년) 페이지당 128kb 도메인당 1mb
  • 4. Flash6의 Local Share Object(02년)• Flash8에서 ExternalInterface을 이용하여 JS로 접근 가능.(06년)• 도메인당 100kb.• Flash의 높은 설치율.
  • 5. Google Gears (07년)• Firefox, IE 플러그인.• SQLLite 임베디드.• 크기에 제한 없음.
  • 6. Client-side Storage in HTML5웹 어플리케이션에 적합한 API.• Web Storage localStorage (sessionStorage) – Cookie, userData, LSO• Web SQL Database – Google gears• Indexed Database
  • 7. Web Storage(DOM Storage)
  • 8. Web Storage• localStorage, sessionStorage localStorage.setItem("bar",”foo”); //값 저장 var foo = localStorage.getItem("bar"); //값 반환 var foo = localStorage["bar"]; localStorage["bar"] = foo; localStorage.removeItem("bar"); // 값 삭제 localStorage.clear(); // 모두 삭제 localStorage.length ; // 저장된 수
  • 9. Web Storage 특징대부분의 브라우저에서 지원.사용하기 쉽다.유효기간이 없다.용량이 크다.오직 client을 위한 Storage.브라우저간 공유.문자만 저장, 객체는 toString한 결과 저장. {}->[object object], []->[object array]
  • 10. Web Storage 지원 현황• Internet Explorer 8• Firefox 3.5• Safari 4• Google Chrome 4• Opera 10.50• iOS 2.0• Android 2.0
  • 11. Web SQL Database
  • 12. 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); }); });}
  • 13. Web SQL Database 특징Google gears와 같음.SQLLite 3.6.19가 임베디드.SQLLite의 문법을 그대로 사용.도메인당 5mb를 제공.단순한 API, 간단한 callback.
  • 14. Web SQL Database 지원 현황• Safari 4.0• Chrome 4.0• Opera 10.50• iOS 3.0• Android 2.0
  • 15. 고민
  • 16. Web SQL Database 문제• SQLLite는 표준이 아님.• 업그레이드 문제.• 다른 디바이스 지원 문제.
  • 17. Indexed DB(Web Simple DB)
  • 18. indexed Database-DB생성 Address Bookthis.db =window.mozIndexedDB.open( "AddressBook",//이름 "책 관련 데이터 베이스“//설명);
  • 19. Object Store 생성 Address Book contractsvar store = this.db.createObjectStore( "contacts", //이름 {"keyPath": "id"} //pk (in-line keys - 자동생성, out-of-line keys - 직접 입력) //false (자동 증가. firefox4 default false, w3c true));
  • 20. Data 등록 AddressBook contracts Id Name Email cellvar 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});
  • 21. Data 등록 AddressBook contracts Id Name Email cellwriteRequest.onsuccess = function(e){ console.log (writeRequest.result);//id};writeRequest.ontimeout = function ( e ) { alert("timeout"); writeTransaction.abort();};
  • 22. Data 검색 AddressBook contracts Id Id Id Id Name Name Name Name Email Email Email Email cell cell cell cellvar 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"); }};
  • 23. Indexed Database 특징 Key/value형태. b-tree데이터 구조. 보다 low레벨을 지원. Callback패턴이 아니라 다양한 event기반의 패턴. 속도가 빠름.
  • 24. 커뮤니티 반응
  • 25. Indexed Database 지원 현황• Firefox4 beta 10• Chrome 11
  • 26. 활용 범위• Web Storage : 검색 기록• Web DB : offline일 때 저장하거나 검색. – 가계부, 메일, 캘린더 등…
  • 27. 한계• 서버, 로컬 두 군데서 데이터를 관리하여 무결성의 문제가 생김.• 보안 이슈로 인하여 활용도가 떨어짐.• 더욱 복잡해지는 클라이언트.• 진행 중인 API.
  • 28. 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

×