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 Storage  localStorage (sessionStorage)  – Cookie, userData, LSO• Web ...
Web Storage(DOM Storage)
Web Storage• localStorage, sessionStorage  localStorage.setItem("bar",”foo”); //값 저장  var foo = localStorage.getItem("bar"...
Web Storage 특징대부분의 브라우저에서 지원.사용하기 쉽다.유효기간이 없다.용량이 크다.오직 client을 위한 Storage.브라우저간 공유.문자만 저장, 객체는 toString한 결과 저장. {}...
Web Storage 지원 현황•   Internet Explorer 8•   Firefox 3.5•   Safari 4•   Google Chrome 4•   Opera 10.50•   iOS 2.0•   Androi...
Web SQL Database
Web SQL DatabaseopenDB : function(){       this.db = openDatabase(AddressBook, 1.0, 데이터 베이스, (5 * 1024 * 1024));},createTa...
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생성               Address Bookthis.db =window.mozIndexedDB.open(            "AddressBook",//이름          ...
Object Store 생성               Address Book                             contractsvar store = this.db.createObjectStore(    ...
Data 등록                 AddressBook      contracts                                     Id                                 ...
Data 등록                 AddressBook      contracts                                     Id                                 ...
Data 검색                  AddressBook       contracts                                        Id          Id      Id      Id...
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/Brow...
Client side storage in html5
Client side storage in html5
Upcoming SlideShare
Loading in …5
×

Client side storage in html5

685
-1

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
685
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Client side storage in html5

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

    Clipping is a handy way to collect important slides you want to go back to later.

×