슬라이드 1

Size: px

Start display at page:

Download "슬라이드 1"

승아 온
8 years ago
Views:

1 Client-Side Storage in HTML5 작성자 : 전용우 ( mixed@nhn.com) 작성년월일 : 2011/02/22 c 2010 NHN CORPORATION

2 목차 1. Storage History 2. Web Storage 3. Web Database 4. Indexed Database

3 1. Storage History

4 1.1 The First Browser War(95') 4 / Client-Side Storage in HTML5

5 1.2 userdata ( 도메인마다 64 KB) 5 / Client-Side Storage in HTML5

6 1.3 Local Shared Objects( 2002 Flash6) ( 도메인마다 100 KB) 6 / Client-Side Storage in HTML5

7 1.3 Google Gear( 2007 ) SQLite 을기반으로하는 SqlDB 데이터제한없음. 7 / Client-Side Storage in HTML5

8 1.4. HTML5 Web Storage Web Database 8 / Client-Side Storage in HTML5

9 2. Web Storage(aka DOM Storage)

10 2.1. Cookie 와비교 1. 사용하기쉽다. 2. 용량이크다.(5kb/5mb) 3. 서버에데이터를젂송하지않는다. 4. 유효기갂이없다. 10 / Client-Side Storage in HTML5

11 2.3. 지원현황 Internet Explorer 8 Firefox 3.5 Safari 4 Google Chrome 4 Opera Iphone 2.0 Android / Client-Side Storage in HTML5

12 2.2. localstorage 와 sessionstorage 차이 sessionstorage 는브라우저를닫으면사라지고 localstorage 는지속적으로남음. 12 / Client-Side Storage in HTML5

13 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

14 3. Web Database

15 3.1. Web Database SQLLite 을기반으로하는 브라우저에내장된 DB. 15 / Client-Side Storage in HTML5

16 3.2. 지원현황 Safari 4.0 Chrome 4.0 Opera Iphone 3.0 Android / Client-Side Storage in HTML5

17 3.2. Database 생성 opendb : function(){ this.db = opendatabase('addressbook', '1.0', ' 데이터베이스 ', (5 * 1024 * 1024)); } 17 / Client-Side Storage in HTML5

18 3.3. Table 생성. createtable : function(){ this.db.transaction(function(tx){ tx.executesql('create TABLE contacts (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, name TEXT, TEXT, cell TEXT) ); }); }, 18 / Client-Side Storage in HTML5

19 3.4. Row 생성. insertrow : function(){ this.db.transaction(function(tx){ tx.executesql('insert INTO contacts (name, , 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

20 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

21 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

22 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

23 3.7. WebDB 의문제점 1. SQLLite 는표준 SQL92 를대부분지키긴했으나중요한일부분을빼먹었음. 2. SQLLite 는표준이아니라 HTML5 의표준정책에위반됨. 3. SQLLite 가 Upgrade 시문제가있음. 23 / Client-Side Storage in HTML5

24 4. IndexedDB(aka Web Simple DB)

25 4.1. IndexedDB 클라이언트에대용량데이터를저장하고 인덱스를이용하여보다빠르게찾는 API 25 / Client-Side Storage in HTML5

26 4.2. 왜 IndexedDB 인가? localstorage 는용량이작고구조화된 데이터를다루기엔부족. 26 / Client-Side Storage in HTML5

27 4.3. 지원현황? IE ( 플러그인 ) Firefox4 beta10 Chrome 11 Safari, Opera 미구현 27 / Client-Side Storage in HTML5

28 4.3. IndexedDB 의지원방식 동기접근 ( 미지원 -WebWork 을이용 ) 비동기접근 ( 지원 firefox4.b8 부터 ) - 각자실행되고 callback 로대답한다. 28 / Client-Side Storage in HTML5

29 4.4. IndexedDB 의 API API 설명 29 / Client-Side Storage in HTML5

30 4.5. IndexedDB 의 API DB 생성 DB 생성 30 / Client-Side Storage in HTML5

31 4.5. IndexedDB 의 API DB 생성 AddressBook 31 / Client-Side Storage in HTML5

32 4.5. IndexedDB 의 API DB 생성 this.db = window.mozindexeddb.open( "AddressBook",// 이름 " 책관련데이터베이스 // 설명 ); 32 / Client-Side Storage in HTML5

33 4.6. IndexedDB 의 API Object Store 생성 Object Store 33 / Client-Side Storage in HTML5

34 4.6. IndexedDB 의 API Object Store 생성 AddressBook contracts 34 / Client-Side Storage in HTML5

35 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

36 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

37 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

38 4.7. IndexedDB 의 API Data manipulate Data manipulate 38 / Client-Side Storage in HTML5

39 4.7. IndexedDB 의 API Data manipulate AddressBook contracts Id Name cell 39 / Client-Side Storage in HTML5

40 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", " " : "mixed@nhn.com", "cell": id, "id" : id }); 40 / Client-Side Storage in HTML5

41 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

42 4.7. IndexedDB 의 API Data manipulate AddressBook contracts Id Name cell Id Name cell 42 / Client-Side Storage in HTML5

43 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

44 4.7. IndexedDB 의 API Data manipulate var request = store.get(id); request.onsuccess = function(event){ request.result. = "i.nevalose@gmail.com"; var request2 = store.put(request.result); request2.onsuccess = function(){ console.log("modified"); } }.bind(this); 44 / Client-Side Storage in HTML5

45 4.8. IndexedDB 의 API Data Fetch Data Fetch 45 / Client-Side Storage in HTML5

46 4.8. IndexedDB 의 API Data Fetch AddressBook contracts Id Name cell Id Name cell Id Name cell Id Name cell 46 / Client-Side Storage in HTML5

47 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

48 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

49 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

50 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

51 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

52 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

53 4.9. IndexedDB 의장점 1. WebDB는명시적으로 transaction을해야하지맊 IndexedDB는오브젝트단위로자동 transaction. 2. IndexedDB는오브젝트를넣을수있음. 3. cursor을이용하여보다빠르게얻어올수있음. 4. *lower* layer라사용자에게더맋은옵션을선택할수있게한다. 53 / Client-Side Storage in HTML5

54 Reference / Client-Side Storage in HTML5

55 Thank you.

10.ppt

10.ppt : SQL. SQL Plus. JDBC. SQL >> SQL create table : CREATE TABLE ( ( ), ( ),.. ) SQL >> SQL create table : id username dept birth email id username dept birth email CREATE TABLE member ( id NUMBER NOT NULL