ごく最近、habrでWEB SQL DBを扱うための記事がありました。 ローカルデータベースの便利なアプリケーションの1つはオフライン作業です。 さらに、多くのブラウザでサポートされているsqlの代わりにローカルストレージを使用する場合の別のオプションを紹介します。
オフラインモードの定義
まず、オフラインで作業していると判断します。 いくつかの方法があります。 まず、リクエストを送信し、失敗した場合に適切なモードで作業を開始できます。 ただし、HTML5では、これをより簡単な方法で、つまり次のように定義できます。
navigator.onLine
残念ながら、これはOperaとFirefoxでのみ機能します（
www.html5demos.com/は 、機能のブラウザーサポートを示す良いサイトです）。
オフラインであると判断したら、さらに作業を進めることができます。 この時点で、必要なすべてのリソースをキャッシュする必要があることを覚えておくことが重要です。 オフラインアプリケーション用のキャッシュの作成の詳細については、
こちらをご覧ください 。 また、StackOverflowでは、どのメソッドがより便利であるか
に関する議論を読むことができます。
WEB SQL DBの使用
データベースの操作は非常に簡単です
最初に作成しましょう
db = openDatabase( "TestDB" , "1.0" , "HTML5 Database" , 200000); 。
以下のパラメーターは、データベース作成機能に渡されます。
- データベース名
- 彼女のバージョン
- 表示名
- バイト単位のサイズ
次に、トランザクションを開き、必要なアクションを実行します。
db.transaction( function (tx)
{
tx.executeSql( "DELETE FROM tbl_test WHERE id = ?" , [item.id]);
});
そして、そのようなこと。 代替手段、つまりjQTデータベースライブラリを提供したい
ここでは、このプラグインの仕組みを読むことができます。
ここからダウンロードできます。最初のソースにあるリンクからダウンロードしようとしても、何も機能しません。
要するに、それがどのように機能するか。
ベースを初期化します。
jQT.dbOpen(“name”, “version”,”descriptione”, size);
テーブルを作成します。
jQT.dbCreateTables(json);
行を挿入：
jQT.dbInsertRows(json);
行選択：
jQT.dbSelectAll(“table”, callback(result));
行を削除します。
jQT.dbDeleteRow(“table”,”key”,”value”);
テーブルを削除します。
jQT.dbDropTable(“table”);
実行リクエスト：
jQT.dbExecuteQuery(“Query”,”Debug text”, callback(result));
私見、非常に便利。
いくつかのコメント。 jQTouchを使用すると、jQT変数が作成されます。 余分なライブラリを使用したくない場合、最も簡単な方法は、ソースにアクセスして、必要なコードを自分で切り取ることです。これは非常に有能に書かれているからです
ローカルストレージを使用します
ここで、すべて同じ作業を行いますが、ローカルストレージのみを使用します。 まず、ストア自体を取得しましょう
var storage = window.localStorage;
空の変数を取得するには、次のコードを記述します。
storage.operations = ""
現在、データストレージを整理する方法の問題に直面しています。 私の解決策は、xmlのテキストバージョンを保存してから変換することでした。 （実際、私の場合、Webサービスが正確にxmlを返したため、ソリューションは非常に明白で、おそらく唯一のものでした）
サーバーへのリクエストを実行します（私はjQueryを使用しており、残りのフレームワークでこのコードを使用することは難しくないと思います）。
$.ajax({
url: '/operations/get/' ,
type: 'POST' ,
success: function (res) {
var successful = $(res).find( "successful" ).text();
if (successful == "true" ) {
storage.operations = "<result>" ;
var jobz = $(res).find( "return" ).children();
jobz.each( function () {
var nodName = $( this )[0].nodeName;
if (nodName == "OPERATIONS" ) {
var operation = $( this );
storage.operations += "<operations>" + operation.html() + "</operations>" ;
}
});
storage.operations += "</result>" ;
} else {
storage.operations += "<?xml version='1.0' encoding='utf-8'?><result></result>" ;
}
}
});
だから、私たちは要求を満たしました。 結果はxmlなので、jQueryでDOMオブジェクトとして使用するには、$（）でラップするだけです。 残念ながら、これはInternet Explorerでは機能しません。InternetExplorerでは、テキストをDOMオブジェクトに変換するために次のコードが必要です。
function getXml(text) {
try {
var xmlDocument = new ActiveXObject( "Microsoft.XMLDOM" );
xmlDocument.async = "false" ;
xmlDocument.loadXML(text);
return xmlDocument;
} catch (e) {
alert(e.description);
}
return null ;
}
IEでのWebサービスの操作については、
こちらをご覧ください 。
リクエストが成功した場合は、ルートノードのすべての子孫を選択し（私の場合は、複数のタイプにすることができます）、必要なタグでラップします。 .html（）を呼び出すとタグ付きのコードが返され、.text（）はタグ内のコンテンツのみを返すことに注意してください。
保存したものを取得するには、次の関数を実行します
function getOperationsFromStorage() {
return $(storage.operations).find( 'operations' );
}
次のように操作できます
getOperationsFromStorage().each( function () {
var id = $( this ).find( 'id' ).text();
alert( "Find entitie with id " +id);
});
ご覧のとおり、この$（）を毎回ラップし、その.find（）メソッドを呼び出します。 ネストされたエンティティがある場合、次のようにしてそれらにアクセスできます
$( this ).find( "otherInfo" ).each( function () {
var name = $( this ).find( "name" ).text();
alert(“Found inline tag value ”+name);
});
オブジェクトを更新する方法についてもう1つの質問がありました。 私は次のようにします。
var s = "<operations>" ;
s += "<id>" + someId+ "</id>" ;
s += "<type>" +type+ "</type>" ;
s += "</operations>" ;
var text = storage. operations;
text = text.substring(0, text.length - 9);
text += s + "</result>" ;
storage. operations = text;
ご覧のとおり、終了タグを切り取り、新しいオブジェクトを追加し、最後に再びラッピングタグですべてを閉じます。
オフラインアプリケーションを作成する作業がより簡単になることを願っています。
PS：結論として、ブラウザによる特定の機能のサポートを判断できる
Modernizrライブラリについてお話したいと思います。