にたまごほうれん草アーカイブ

はてなダイアリーで書いてた「にたまごほうれん草」という日記のアーカイブです。現在は「にたまごほうれん草ブログ」を運営中です。

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>

コードの書き方がところどころダサいのは目をつぶってくださいな。