Clever Geek Handbook

HTML 5. Web SQLデータベースでの作業

HTML 5には、Web開発者がより強力でリッチなアプリケーションを作成できるようにする多くの新機能があります。 これらの機能には、Webストレージ（IE8でサポート）やWeb SQLデータベースなど、クライアントにデータを保存する新しい方法が含まれています。



さらに、Webストレージがキーと値のペアの保存に重点を置いている場合、Web SQLデータベースの場合、完全なsqliteがあります（現在のすべての実装では、このデータベースエンジンが使用されます。これは標準化の問題です）。



次に、Web SQLデータベースを操作する方法を紹介します。 この場合、例は当然JavaScriptになります。 さらに、この経済全体のブラウザーサポートでは物事があまりうまくいっていないことに注意する価値がありますが、すべてが徐々に改善されており、たとえばOpera 10.50ではサポートがあり、WebKitエンジンには既にブラウザーがあります。 サポートしているブラウザの詳細については、 リンクをクリックしてください 。



データベースへの接続。



データベースへの接続は非常に簡単です。



db = openDatabase("ToDo", "0.1", "A list of to do items.", 200000);







このコードは、データベースを表すオブジェクトを作成し、同じ名前のデータベースが存在しない場合は作成されます。 この場合、引数はデータベース名、バージョン、表示名、おおよそのサイズを示します。 さらに、おおよそのサイズが制限ではないことに注意することが重要です。 実際のデータベースサイズは異なる場合があります。



nullのdbオブジェクトをチェックすることにより、データベースへの接続の成功を評価できます。



if(!db){alert("Failed to connect to database.");}







このユーザーのデータベースへの接続が過去に既に行われ、成功した場合でも、このチェックを常に実行してください。 セキュリティ設定が変更されたり、ディスク容量が終了したり（ユーザーがスマートフォンを使用している場合など）、ムーンフェイズが不適切になったりする場合があります。



リクエストの履行。



データベースへのクエリを実行するには、まずdatabase.transaction（）関数を呼び出してトランザクションを作成する必要があります。 これには1つの引数があります。つまり、トランザクションオブジェクトを受け取り、データベースクエリを実行する別のJavaScript関数です。



実際、トランザクションオブジェクトのexecuteSql関数を呼び出すことで、SQLクエリ自体を実行できます。 4つの引数が必要です。

以下の関数executeSqlの例：



db.transaction(function(tx) {

tx.executeSql("SELECT COUNT(*) FROM ToDo", [], function(result){}, function(tx, error){});

});







「ToDo」テーブル（まだ存在しない）から選択できない場合、このテーブルが作成されるようにコードを変更しましょう。



db.transaction(function(tx) {

tx.executeSql("SELECT COUNT(*) FROM ToDo", [], function (result) { alert('dsfsdf') }, function (tx, error) {

tx.executeSql("CREATE TABLE ToDo (id REAL UNIQUE, label TEXT, timestamp REAL)", [], null, null);

})});







データを挿入します。



ToDoテーブルに新しい行を挿入しましょう。 SQL構文に精通している人にとっては、以下の例は非常に馴染みのあるものです。



db.transaction(function(tx) {

tx.executeSql("INSERT INTO ToDo (label, timestamp) values(?, ?)", [" iPad HP Slate", new Date().getTime()], null, null);

});







SQLクエリの最初の疑問符は「iPadまたはHPスレートを購入」に置き換えられ、2番目はタイムスタンプに置き換えられます。 その結果、およそ次のリクエストが実行されます。

INSERT INTO ToDo (label, timestamp) values (" iPad HP Slate", 1265925077487)







クエリ結果を操作します。



データ選択のクエリの結果には一連の行が含まれ、各行にはこの行のテーブル列の値が含まれます。



関数result.rows.item（i）を呼び出すことにより、結果の任意の行にアクセスできます。iは行インデックスです。 次に、必要な値を取得するには、特定の列を名前で参照する必要があります-result.rows.item（i）["label"]。



次の例は、ページにデータベースクエリの結果を表示します。



db.transaction(function(tx) {

tx.executeSql("SELECT * FROM ToDo", [], function(tx, result) {

for(var i = 0; i < result.rows.length; i++) {

document.write('<b>' + result.rows.item(i)['label'] + '</b><br />');

}}, null)});







おわりに



Web SQLデータベースを使用すると、強力な機能が提供されますが、気にしないでください。 Webストレージを使用して問題を解決できる場合は、使用することをお勧めします。



このトピックに関する追加情報は、w3cコンソーシアムWebサイトの対応するセクションにあります 。

また、Web SQLデータベースについては、ORMライブラリの開発がすでに始まっています。 そのようなライブラリの例はこちらです。


More articles:


All Articles