フロントエンドHTML 5のいくつかの記憶方式のまとめ

6742 ワード
全体的な状況.
h 5以前は、ストレージは主にcookiesであった.
  • cookiesの欠点:リクエストヘッダにデータが付いていて、サイズは4 k以内です.主Domain汚染.
  • 主な応用:ショッピングカート、顧客登録
  • IEブラウザに対してUserDataがあり、サイズは64 kであり、IEブラウザのみがサポートしている.

    • ターゲット
  • 4 kのサイズの問題を解決する
  • 要求ヘッダ常帯域記憶情報の問題を解決する
    • .
  • リレーショナルストレージの問題を解決する
  • ブラウザ間
    • 1.ローカルストレージlocalstorage
    保存方法:
    手動で削除しない限り、キー値ペア(Key-Value)で保存し、永続的に保存します.
    サイズ:
    各ドメイン名5 M
    サポート:
    注意:IE 9 localStorageはローカルファイルをサポートしていません.サポートするには、プロジェクトをサーバに配備する必要があります.
    検出方法:
    if(window.localStorage){
  alert('This browser supports localStorage');
}else{
  alert('This browser does NOT support localStorage');
}

    一般的なAPI:
    getItem//レコードを取る
    setIten//レコードの設定
    removeItem//レコードの削除
    key//keyに対応する値をとる
    クリア//レコードクリア
    保存されたコンテンツ
    配列、画像、json、スタイル、スクリプト...(文字列にシーケンス化できるものであれば格納可能)
    2.ローカルストレージsessionstorage
    HTML 5のローカルストレージAPIのlocalStorageは、sessionStorageと同じ方法で使用されます.sessionStorageはページを閉じると空になり、localStorageは常に保存されます.
    3.オフラインキャッシュ(application cache)
    ローカルキャッシュアプリケーションに必要なファイル
    使用方法
    ①manifestファイルの構成
    ページ:
     
 
 ...

    Manifestファイル
    manifestファイルは、ブラウザにキャッシュされたコンテンツ(およびキャッシュされていないコンテンツ)を通知する簡単なテキストファイルです.
    manifestファイルは3つの部分に分けられます.
    ①CACHE MANIFEST–このタイトルの下にあるファイルは、初回ダウンロード後にキャッシュされます
    ②NETWORK–このタイトルの下にあるファイルは、キャッシュされないサーバへの接続が必要です
    ③FALLBACK–このタイトルの下にあるファイルは、ページがアクセスできない場合のロールバックページ(例えば404ページ)を規定しています.
    完全demo
     CACHE MANIFEST
 # 2016-07-24 v1.0.0
 /theme.css
 /main.js

 NETWORK:
 login.jsp

 FALLBACK:
 /html/ /offline.html

    サーバ上
    manifestファイルには、正しいMIME-type、すなわち「text/cache-manifest」を構成する必要があります.
    例えばTomcat:
     
     manifest
     text/cache-manifest

    共通API
    コアはアプリケーション・キャッシュの現在のステータスを表すstatusプロパティを持つアプリケーション・キャッシュ・オブジェクトです.
    0(UNCACHED):キャッシュなし、すなわちページに関連するアプリケーションキャッシュなし
    1(IDLE):アプリケーションキャッシュが更新されていないアイドル状態
    2(CHECKING):チェック中、つまり記述ファイルをダウンロードして更新をチェックしている
    3(DOWNLODING):ダウンロード中、すなわちアプリケーションキャッシュが記述ファイルで指定されたリソースをダウンロードしている
    4(UPDATEREADY):更新が完了し、すべてのリソースがダウンロードされました
    5(IDLE):アプリケーションキャッシュの記述ファイルが存在しないため、ページはアプリケーションキャッシュにアクセスできません.
    関連イベント
    適用キャッシュのステータスの変更を示します.
    checking:ブラウザがアプリケーションキャッシュの更新を検索するときにトリガー
    error:更新またはダウンロードリソースのチェック中にエラーが送信された場合にトリガーされます
    noupdate:記述ファイルをチェックしてファイルに変化がないことを発見したときにトリガー
    downloading:アプリケーションキャッシュリソースのダウンロード開始時にトリガー
    progress:ファイルダウンロードアプリケーションキャッシュ中にダウンロードを継続してトリガー
    updateready:ページの新しいアプリケーションキャッシュのダウンロード完了トリガ
    Cached:アプリケーションキャッシュが完全に使用可能になったときにトリガーされます
    Application Cacheの3つのメリット
    ①オフラインブラウズ
    ②ページの読み込み速度を上げる
    ③サーバ圧力の低減
    注意事項
  • ブラウザではキャッシュデータの容量制限が異なる場合があります(一部のブラウザでは、サイトごとに5 MBの制限が設定されています)
    • .
  • manifestファイル、または内部に列挙されたファイルが正常にダウンロードできない場合、更新プロセス全体が失敗とみなされ、ブラウザは古いキャッシュ
    • をすべて使用し続けます.
  • manifestを参照するhtmlはmanifestファイルと同じソースで、同じドメインで
    • でなければなりません.
  • ブラウザでは、manifestファイルを参照するHTMLファイルが自動的にキャッシュされます.これにより、HTMLコンテンツを変更した場合、更新するにはバージョンを更新する必要があります.
  • manifestファイルのCACHEは、NETWORK、FALLBACKの位置順序とは関係なく、暗黙的な宣言であれば最前面の
    • が必要です.
  • FALLBACKのリソースは、manifestファイルと同じソース
    • でなければなりません.
  • バージョンの更新が完了すると、新しいバージョンが開始され(ページが再ブラシされる場合があります)、リスニングバージョンイベントを追加する必要があります.
  • サイトの他のページはmanifestプロパティが設定されていなくても、要求されたリソースがキャッシュから
    • にアクセスする場合があります.
  • manifestファイルが変更されると、リソースリクエスト自体も更新
    • をトリガーする.
    もっと参考にします!
    オフラインキャッシュと従来のブラウザキャッシュの違い:
  • オフラインキャッシュはアプリケーション全体に対して、ブラウザキャッシュは単一ファイル
    • である.
  • オフラインキャッシュが切れたか、ページを開くことができますか.ブラウザキャッシュは
    • できません.
  • オフラインキャッシュは、ブラウザにリソース
    • の更新をアクティブに通知することができる.
    4.Web SQL
    リレーショナル・データベース、SQL文でアクセス
    Web SQLデータベースAPIはHTML 5仕様の一部ではありませんが、SQLを使用してクライアント・データベースを操作するAPIsのセットを導入した独立した仕様です.
    サポート
    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);
 });

    これらの操作から分かるように、基本的にはSQL文でデータベースの関連操作を行いますが、もしあなたがMySQLができるなら、これは使いやすいはずです.
    もっとチュートリアルを見て!
    5.IndexedDB
    インデックスデータベース(IndexedDB)API(HTML 5の一部として)は、ローカルストレージデータが豊富なデータ密集型のオフラインHTML 5 Webアプリケーションの作成に役立ちます.また、モバイルWebアプリケーションなどの従来のオンラインWebアプリケーションがより迅速に実行および応答できるように、データのローカルキャッシュにも役立ちます.
    非同期API
    IndexedDBでのほとんどの操作は、私たちがよく使う呼び出し方法ではなく、結果を返すモードではなく、データベースを開く操作などの応答のモードを要求します.
    これにより,データベースを開くと実質的にDBオブジェクトが返され,そのオブジェクトはresultにある.上図からresultを除くことがわかります.もういくつかの重要なプロパティはonerror、onsuccess、onupgradeneededです(開いているデータベースのバージョン番号と既存のデータベースのバージョン番号が一致しない場合に呼び出すように要求します).これは私たちのajaxリクエストのようなものです.このリクエストを開始した後、リクエストが成功するのはいつなのか分からないので、コールバックでいくつかの論理を処理する必要があります.
    閉じると削除
      function closeDB(db){
       db.close();
  }
  function deleteDB(name){
       indexedDB.deleteDatabase(name);
  }

    データストア
    indexedDBにはテーブルの概念はなく、1つのデータベースに複数のobjectStoreを含めることができ、objectStoreは柔軟なデータ構造であり、複数のタイプのデータを格納することができます.つまり、objectStoreはテーブルに相当し、格納されている各データはキーに関連付けられています.
    各レコードの指定フィールドをキー値(keyPath)として使用してもよいし、自動的に生成された増分数をキー値(keyGenerator)として使用してもよいし、指定しなくてもよい.選択キーのタイプによってobjectStoreが格納できるデータ構造にも違いがあります.
    これはちょっと複雑です.ここのチュートリアルを見てください.
    1.http://www.cnblogs.com/dolphinX/p/3415761.html 　 2.http://www.cnblogs.com/dolphinX/p/3416889.html
    詳細APIアドレス:http://www.ibm.com/developerworks/cn/web/wa-indexeddb/#ibm-pcon
    変換元:http://www.cnblogs.com/LuckyWinty/p/5699117.html
    最長上昇サブシーケンスnlogn
    HDU 2135 Rolling tableシミュレーション問題