■ 웹 SQL 데이터베이스에서 데이터베이스 버전을 업그레이드하는 방법을 보여준다.
▶ test.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script language="javascript"> var db; var sqlArray = [ 'create table phonebook (id integer primary key autoincrement, name varchar(32), phone varchar(32))', // 버전 1 'alter table phonebook add column gender char', // 버전 2 'alter table phonebook add column company varchar(64)' // 버전 3 ]; function onLoad() { try { this.db = openDatabase('html5', '1', '전화번호부', 1024 * 1024); } catch(e) { document.getElementById('output').innerHTML = '데이터베이스를 여는 중 에러가 발생했습니다 : ' + e; return; } document.getElementById('output').innerHTML = '데이터베이스를 열었습니다.'; } function showVersion() { document.getElementById('output').innerHTML = "현재 데이터베이스 버전 : " + this.db.version; } function upgradeVersion() { var message = ''; var version = eval('0' + this.db.version); if(version < this.sqlArray.length) { this.db.changeVersion ( this.db.version, String(this.sqlArray.length), function(tx) { for(var i = version; i < this.sqlArray.length; i++) { tx.executeSql(this.sqlArray[i]); message += 'version ' + (i + 1) + '로 업그레이드하였습니다.<br />'; } document.getElementById('output').innerHTML = message; } ); } else { document.getElementById('output').innerHTML = '현재 버전(' + version + ')이 최종 버전입니다.'; } } function resetVersion() { this.db.changeVersion ( this.db.version, '', function(tx) { tx.executeSql('drop table phonebook'); } ); document.getElementById('output').innerHTML = '데이터베이스를 초기 상태로 설정했습니다.'; } </script> </head> <body onload="onLoad();"> <div id="output">데이터베이스 테스트입니다.</div> <p /> <input type="button" value="현재 버전 조회" onclick="showVersion();" /> <input type="button" value="버전 업그레이드" onclick="upgradeVersion();" /> <input type="button" value="버전 초기화" onclick="resetVersion();" /> </body> </html> |