.htaccessファイルの設定

マニフェストファイルを「text/cache-manifest」タイプとして送出するための設定

AddType text/cache-manifest .manifest

データベース作成に挑戦

htmlのソース

<H1>Databaseへの書き込みと読み出し</H1>
<A href="#" onClick="saveDB();return false;">SaveDB</A><BR>
<A href="#" onClick="readDB();return false;">DBレコード読み込み</A><BR>
<DIV id="msg"></DIV>

javascriptのソース

// データベース作成
try {
    if (!window.openDatabase) {
        alert('not supported');
    } else {
        var shortName = 'mydatabase';
        var version = '1.0';
        var displayName = 'My Important Database';
        var maxSize = 65536; // in bytes
        var myDB  = openDatabase(shortName, version, displayName, maxSize);
        // You should have a database instance in db.
    }
} catch(e) {
    // Error handling code goes here.
    if (e == 2) {
        // Version number mismatch.
        alert("Invalid database version.");
    } else {
        alert("Unknown error "+e+".");
    }
 return;
}

//alert("Database is: "+myDB );

// ページが構築されたら処理を行う
window.onload = function(){
    var ele = document.getElementById("msg");
    myDB.transaction(
        function(tx){
            tx.executeSql('CREATE TABLE gpstable(lat REAL, lng REAL, time REAL );');
        },
        function (err){
            if (err.code == 1) {
                ele.innerHTML = "データベースtestDBはすでにあります";
            }else{
                ele.innerHTML = "データベースエラーです : "+err.code;
            }
        },
        function (){ ele.innerHTML = "testDBを作成しました"; }
    );
}
// データベースへの保存
function saveDB(){
    myDB.transaction(
        function(tx){
            // 3つのデータを書き込む
            tx.executeSql('INSERT INTO gpstable values (12.3, 45.6, 78.9)');
        },
        function(err){ alert("データベースエラー : "+err.code); },
        function (){ document.getElementById("msg").innerHTML = "データを保存しました" }
    );
}
// 保存してあるデータを読み出す
function readDB(){
    myDB.transaction(
        function(tx){
            // 全てのデータを読み出す
            tx.executeSql('SELECT * from gpstable;',
            [ ],
            function (tx, rs){
                var txt = "";
                // データの数(rs.rows.length)だけ繰り返し読み出す
                for (var i=0; i<rs.rows.length; i++){
                    var row = rs.rows.item(i);
                    txt = txt + row.lat+","+row.lng+" : "+row.time+"<br>";
                }
                // 画面に表示する
                document.getElementById("msg").innerHTML = txt;
            });
        }
    );
}

初期画面

DBレコード読み込み　をクリックした時

SaveDBをクリックすると同じデータが追加される

ローカルストレージが使えるか確認する

htmlのソース

<h1>Sample</h1>
<div id="result">ローカルストレージは使えません</div>
</body>

javascriptのソース

if (window.localStorage){
document.getElementById("result").innerHTML = "ローカルストレージは使えます";
}

ローカルストレージに挑戦

ローカルストレージは
iPhone (iOS 4.2)のlocalStorageはオリジンあたり最大2621391文字まで保存できます。
とりあえず利用してみる
htmlのソース

<h1>ローカルストレージにデータを書き込む</h1>
<div id="result">読み込んだデータストレージ</div>

javascriptのソース

 window.localStorage.setItem('data', "2010,10,5");//ストレージにセット
 var readData = window.localStorage.getItem("data");//ストレージの内容を取得
 document.getElementById("result").innerHTML = readData;//ストレージの内容を表示