HTML 5ストレージまとめ

h 5の記憶方式は以下の通りである
1、web storage

ローカルストレージlocal storage

ローカルストレージsession storage

2、オフラインキャッシュ3、Web SQL 4、IndexedDB
1、web storage
ストレージ形式:key-->valueストレージ内容:配列、json、ピクチャ、スクリプト、スタイルなど文字列に直列化できるコンテンツ使用シーン:ローカルデータを利用して、ネットワーク転送を減少し、弱いネット高遅延低帯域幅、できるだけデータローカライズサイズ制限:ドメイン名ごと5 M
**ローカルストレージlocal storage-時間制限のないデータストレージ**
手動で削除しない限り、ドメイン内は安全で永続的に保存されます.

if(typeof(Storage) !== "undefined") {

          // localStorage.setItem(  ，  )               
          // localStorage.getItem(  )               
          // localStorage.removeItem(  )            
          // localStorage.clear()                 
    var value = "  ";
    //  
    localStorage.setItem("key", value);
    //  
    var name = localStorage.getItem("key");
    console.log(name);
    //  
    localStorage.removeItem("key");
    //  localStorage  
    localStorage.clear()
} else {

    console.log("      web Storage")
}

**ローカルストレージセッションstorage-セッションのデータストレージ**
短期保存、ブラウザの再起動、ページのクローズ、または新しいページのオープン時に失効

if(typeof(Storage) !== "undefined") {

 //sessionStorage.setItem(  ，  )                
 //sessionStorage.getItem(  )                
 //sessionStorage.removeItem(  )             
 //sessionStorage.clear ()                 

    var value = "  ";
    //  
    se.setItem("key", value);
    //  
    var name = localStorage.getItem("key");
    console.log(name);
    //  
    localStorage.removeItem("key");
    //  localStorage  
    localStorage.clear()
} else {

    console.log("      web Storage")
}

2、オフラインキャッシュ(application cache)
HTML 5を使用すると、cache manifestファイルを作成することで、Webアプリケーションのオフラインバージョンを簡単に作成できます.
HTML 5は、Webアプリケーションがキャッシュ可能であり、インターネット接続がない場合にアクセス可能であることを意味するアプリケーションキャッシュを導入している.
アプリケーション・キャッシュは、アプリケーションに3つのメリットをもたらします.

オフラインブラウズ-ユーザは、オフラインを適用する際にそれらの

を使用することができる.

速度-キャッシュされたリソースのロードが高速

サーバ負荷の削減-ブラウザは、更新または変更されたリソースのみをサーバからダウンロードします.

インターネットExplorerを除くすべての主流ブラウザでアプリケーションキャッシュがサポートされています.
未完待続...
参考までにhttp://www.w3school.com.cn/html5/html_5_app_cache.asp
3、Web SQL
Web SQLデータベースは、最新版Safari、Chrome、Operaブラウザで動作します.
コアメソッド:

openDatabase:このメソッドは、既存のデータベースまたは新しいデータベースを使用してデータベース・オブジェクトを作成します.

transaction:この方法では、トランザクションを制御し、このような状況に基づいてコミットまたはロールバックを実行できます.

executeSql:このメソッドは、実際のSQLクエリーを実行するために使用されます.

データベースを開く:

  var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024,fn);
  //openDatabase()             ：     、   、    、     、    

クエリー操作を実行するには、次の手順に従います.

  var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
  db.transaction(function (tx) { 
     tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
  });

データの挿入:

  var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
  db.transaction(function (tx) {
     tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
     tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, "winty")');
     tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty")');
  });

データの読み込み:

  db.transaction(function (tx) {
     tx.executeSql('SELECT * FROM WIN', [], function (tx, results) {
        var len = results.rows.length, i;
        msg = "
      : " + len + "
";
        document.querySelector('#status').innerHTML +=  msg;
 
        for (i = 0; i < len; i++){
           alert(results.rows.item(i).name );
        }
 
     }, null);
  });

具体的なコードは、データベースに関する別の記事のリンクを参照してください.http://www.jianshu.com/p/ba69532c0b00
4、IndexedDB
http://www.cnblogs.com/dolphinX/p/3415761.html http://www.cnblogs.com/dolphinX/p/3416889.html
H 5の前に
主にcookiesを使用
データサイズ:格納容器として、クッキーのサイズは4 KB程度に制限されています.セキュリティ問題:HTTPリクエストでのクッキーは明文伝達であるため、セキュリティ上の危険性がある.ネットワーク負担:クッキーは各HTTPリクエストに付加され、HttpRequestおよびHttpResponseのヘッダで伝送されるため、不要なトラフィック損失が無形に増加する.
互換性の問題:
ローカルストレージはH 5の新高ですが、古いブラウザではどうすればいいですか?骨董品のブラウザを使わないか、クッキーを代わりに使う必要はありません.localStorageは文字列を格納するために使われることが多いので、他のコンパイル型の言語では文字列を格納して何ができるのか、JavaScriptでは古くて大活躍し、JSON形式の文字列を格納してアプリケーションを拡張したり、クラス名変数値などの情報を格納してeval()でJSを使用する快感を味わうことができます.localStorageが文字列を格納している以上、古いアンティークブラウザではCookiesを使用して代替案を作成し、ドメイン内の安全を確保することができます.