オフラインモードの定義
まず、オフラインで作業していると判断します。 いくつかの方法があります。 まず、リクエストを送信し、失敗した場合に適切なモードで作業を開始できます。 ただし、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ライブラリについてお話したいと思います。