Webオフラインストレージのいくつかの方法

12006 ワード

Web

HTML 5の正式な原稿決定に伴い、HTMLオフラインネットワークアプリケーションの特性を大量に使用することもできます.
#1、Application Cache
Application Cacheは簡単にWebAppをオフラインにすることができます.
サポートするブラウザ:IE 10+,FireFox,Chrome,Safari,Opera
メリット:

オフラインブラウズ--ユーザーが再オフラインできる場合にApplication

を使用します.

速度--リソースがキャッシュされているため、ロードが速い場合は

サービス・エンド・データ・ローディングの削減--ブラウザは、更新されたデータ

をサーバからロードするだけです.
欠点:

Manifestファイルが変更された場合にのみ

が更新されます.

Manifestのすべてのファイルを一度に更新する必要があります.次は

が有効になります.
使用方法
Step 1:html上でmanifestファイル(index.html)を指定する

<html manifest="appCacheList.manifest">

</html>

Step 2:manifestファイルの内容を設定する(appCache.manifest)

CACHE MANIFEST



#        

./all.css

./1.jpg

./index.js



# NETWORK:*，           

NETWORK:

*



#    uri   ，    fallback

FALLBACK:

/html/ /offline.html

キャッシュの手動更新:

if ( window.applicationCache.status == window.applicationCache.UPDATEREADY ){

    window.applicationCache.update();

}

注意:

異なるブラウザでは、Application Cacheのサイズが一致しません.注意してください.

詳細については、http://kayosite.com/web-app-by-jquery-mobile-and-html5-offline-web-applications.html

を参照してください.
#2、Local Storage
Local Storageでは、ブラウザにデータを保存できます.
サポートするブラウザ:IE 10+,FireFox,Chrome,Safari,Opera
メリット:

容量大

使いやすい

強力

原生サポート

はローカルのみであり、サーバと対話することはありません.
欠点:

ブラウザ互換性差

セキュリティが悪い(機密データを格納しない)

使用方法
まず、ブラウザがLocal Storageをサポートしているかどうかをwindow.localStorageで判断します.次に、この方式にはブラウザ互換性があるため、共通のライブラリを使用して互換性を遮断することをお勧めします.

//         ，       ，         。

(function(window){

  if(!window.localStorage){

    throw new Error('Your brower can\'t support local storage!');

  }

  var ls = window.localStorage;

  var localStorageKit = {

    getLength: function(){

      return ls.length;

    },

    clear: function(){

      ls.clear();

      return true;

    },

    set: function(k, v){

      ls.setItem(k, v);

    },

    get: function(k){

      return ls.getItem(k);

    },

    remove: function(k){

      ls.removeItem(k);

    },

    getKeyByIndex: function(index){

      return ls.key(index);

    }

  };

  window.lsKit = localStorageKit;

})(window);

基本的な操作方法はクッキーとあまり違いがありません.
Session Storage:Session StorageはLocal Storageと非常に類似しており、操作方法も一致しています.保存されたメモリは現在のセッションのみ有効であるため、ここでは詳しく説明しません.
#3、Web SQL
Web Sql Databaseは、html 5環境でjsでCRUDを実行できるwebデータベースです.データベースのコアはSQLiteです.
メリット:

ローカル・データベース

は、複雑な関係型データ

を処理することができる.
欠点:

はしばらくchromeのみサポートされていますが、Androidが大活躍するモバイル端末については、これは避けられる欠点であるはずです(最新バージョンのOperaやSafariもサポートされているようです)

使用方法
まず、Web sqlの3つのコアメソッドを紹介します.

openDatabase:この方法では、既存のデータベースを使用するか、新しいデータベースを作成してデータベース・オブジェクトを作成します.

transaction:この方法では、状況に応じてトランザクションのコミットまたはロールバックを制御できます.

executeSql:このメソッドは、実際のSQLクエリーを実行するために使用されます.var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); var msg; db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); console.log('Log message created and row inserted.'); }); db.transaction(function (tx) { tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { var len = results.rows.length, i; console.log('Found rows: ' + len); for (i = 0; i < len; i++){ console.log(results.rows.item(i).log) } }, null); });

データベースとして使えばいいです.
#4、IndexedDB
IndexedDBは、構造化されたローカルデータストレージである.は、平面ファイルベースのデータベースで、階層化されたキー値格納と基本的なインデックスを採用しています.
メリット:

標準化

複雑なデータを格納

はインデックス

をサポートする
欠点:

SQL

はサポートされていません

は相対的に複雑である

である.
使用方法

//      ，          ，          

var dbRequest = window.indexedDB.open('testDb', 2);



dbRequest.onupgradeneeded=function(e){

    //       

    var db=e.target.result;

    if(!db.objectStoreNames.contains('users')){

        var store=db.createObjectStore('users',{keyPath: 'id'});

        store.createIndex('nameIndex','name',{unique:true}); 

        store.createIndex('ageIndex','age',{unique:false}); 

    }

    console.log('upgrade successfully!');

};



dbRequest.onsuccess = function(e){

  console.log('Open database successfully!');

  //         

  var db = e.target.result;

  var storeName = 'users';

  //     

  var tran = db.transaction(storeName, 'readwrite');

  var users = tran.objectStore(storeName);

  for(var i = 0; i < 5; i++){

    users.add({

      id: i,

      name: 'user' + i,

      age: Math.floor(Math.random() * 10) + 18

    });

  }



  //    

  var userStore = db.transaction(storeName).objectStore(storeName);

  var request = userStore.openCursor();

  request.onsuccess = function(e){

    var cursor = e.target.result;

    if(cursor){

      console.log(cursor.key);

      console.log(cursor.value);

      cursor.continue();

    }

  }

}

その他
HTML 5におけるクライアントにデータをローカルに格納するための複数のAPI間の比較
HTML 5ローカルストレージ——IndexedDB(一:基本使用)
HTML 5ローカルストレージ——IndexedDB(二:インデックス)

JSの隔行変色

フロントエンドプロジェクトのコンポーネント化について