Client side storage in html5
Upcoming SlideShare
Loading in...5
×
 

Client side storage in html5

on

  • 793 views

 

Statistics

Views

Total Views
793
Views on SlideShare
791
Embed Views
2

Actions

Likes
0
Downloads
5
Comments
0

1 Embed 2

http://localhost 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Client side storage in html5 Client side storage in html5 Presentation Transcript

  • 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 SQL Database – Google gears• Indexed Database
  • Web Storage(DOM Storage)
  • 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 ; // 저장된 수
  • 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생성 Address Bookthis.db =window.mozIndexedDB.open( "AddressBook",//이름 "책 관련 데이터 베이스“//설명);
  • 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));
  • 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});
  • Data 등록 AddressBook contracts Id Name Email cellwriteRequest.onsuccess = function(e){ console.log (writeRequest.result);//id};writeRequest.ontimeout = function ( e ) { alert("timeout"); writeTransaction.abort();};
  • 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"); }};
  • 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