HTML5のWeb SQL DatabaseをGoogle Chromeで試す
W3C - Offline Web Applications 日本語訳 - HTML5.JPによるとJavaScriptからローカルDBを扱えるとのことなので、サンプルコードを拝借しながら試してみた。Google Chromeでは既にHTML5の新機能の実装は入ってきているようで、簡単なノートアプリを作成したらさっくりと動いてしまいました。
こちらで試せます→testdatabase.html
コード
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>web database test</title> <script type="text/javascript"> var db = window.openDatabase("notes","","notes app", 1048576); function clearNotes() { db.transaction(function(tx) { tx.executeSql('DROP TABLE Notes',[], function(tx,res){}, function(tx,error) { reportError('sql',error.message); }); }); update(); } function render(region) { printdbg('render start'); db.transaction(function(tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS Notes(note TEXT)',[]); tx.executeSql('SELECT * FROM Notes', [], function(tx, res) { var str = '<table border="1"><tr><th>ノート</th></tr>'; var len = res.rows.length; printdbg('row length: '+len); for(var i=0; i<len; i++) { str += '<tr><td>'+res.rows.item(i).note+'</td></tr>'; } str += '</table>'; renderNotes(str); }); }); } function renderNotes(str) { document.getElementById('render').innerHTML = str; } function insertNote(text) { db.transaction(function(tx) { tx.executeSql('INSERT INTO Notes VALUES(?)', [text], function(tx, res) { update(); }, function(tx, error) { reportError('sql', error.message); }); }); } function reportError(source, message) { alert(message); } function update() { var region = document.getElementById('render'); printdbg('udpate start'); render(region); var ti = document.getElementById('textinput'); ti.value = ''; ti.focus(); } function printdbg(text){ var dbgswitch = 1; if (dbgswitch) { var dbg = document.getElementById('debug'); if (dbg) dbg.innerText += text + "\n"; } } </script> </head> <body onload="update()"> <input id="textinput" type="text"/> <input type="submit" value="登録" onclick="javascript:insertNote(document.getElementById('textinput').value);"/> <input type="submit" value="クリア" onclick="javascript:if (confirm('クリアします')) { clearNotes(); }"/> <div id="render"></div> <div id="debug"></div> </body> </html>
コードの書き方がところどころダサいのは目をつぶってくださいな。