ホームページ >ウェブフロントエンド >H5 チュートリアル >クライアントにデータを保存する html5 のいくつかの例の詳細な説明
クライアントにデータを保存する html5 のいくつかの例の詳細な説明
- 伊谢尔伦オリジナル
- 2017-05-30 10:40:482374ブラウズ
1.アプリケーション キャッシュ
HTML5 ではアプリケーション キャッシュが導入されており、Web アプリケーションをキャッシュしてネットワークがない場合でも使用できるようになります。
アプリケーションキャッシュには3つの機能があります
オフラインブラウジング
キャッシュされたリソースの読み込みが速くなります
サーバーの負荷を軽減し、ブラウザは更新または変更されたリソースのみをサーバーからダウンロードします
メソッドHTML タグにマニフェスト属性を追加すると便利です
マニフェストが指定されたすべてのページは、ユーザーがアクセスするとキャッシュされます。マニフェスト属性が指定されていない場合、ページはキャッシュされません (マニフェスト ファイルで直接指定されていない限り)。
マニフェスト ファイルの推奨ファイル拡張子は「.appcache」です。
<!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html>
マニフェスト ファイルは、何がキャッシュされているか (何がキャッシュされていないのか) をブラウザーに伝える単純なテキスト ファイルです。
マニフェスト ファイルは 3 つの部分に分けることができます:
CACHE MANIFEST - この見出しの下にリストされているファイルは最初のダウンロード後にキャッシュされます
NETWORK - この見出しの下にリストされているファイルはサーバーへの接続が必要であり、キャッシュされません
FALLBACK - この見出しの下にリストされているファイルは、ページがアクセスできない場合（404 ページなど）のフォールバック ページを指定します
完全なマニフェスト ファイル
CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html5/ /404.html
2 .localStorage および sessionStorage
HTML5 は、クライアント側でデータを保存する 2 つの新しい方法を提供します:
localStorage - 時間制限のないデータ ストレージ
sessionStorage - セッション用のデータ ストレージ
以前は、これはすべて Cookie によって行われていました。ただし、Cookie はリクエストごとにサーバーに渡されるため、速度が遅く非効率的になるため、大量のデータを保存するのには適していません。
localStorage と sessionStorage は両方とも、setItem()、getItem()、removeItem() などの同じ操作メソッドを持っています。
localStorage と sessionStorage のメソッド:
setItem は値を格納します
使用法: 値をキーフィールドに格納します
使用法:.setItem(key, value)
コード例:
sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in");
getItem が値を取得する
目的: 指定されたキーに対してローカルに保存されている値を取得する
使用法: .getItem(key)
コード例:
var value = sessionStorage.getItem("key");
var site = localStorage.getItem("site");
removeItemDelete キー
目的: 指定されたキーに対してローカルに保存されている値を削除します
使用法: .removeItem(key)
コード例:
sessionStorage.removeItem("key");
localStorage.removeItem("site");
clear すべてのキー/値をクリアします
目的: すべてのキー/値をクリアします
使用法: .clear( )
sessionStorage は永続ストレージではないため、ブラウザが閉じられるとクリアされます。 LocalStorage は、データがアクティブに削除されない限り、永続的なローカル ストレージとして使用されます。
3.indexDB
indexDB は軽量の NOSQL データベースです。インデックス作成、トランザクション処理、堅牢なクエリ機能など、Web SQL (sqlite) よりも効率的です。
その機能は次のとおりです:
Web サイトには 1 つ以上の IndexedDB データベースがある場合があり、各データベースには一意の名前が必要です。
データベースには 1 つ以上のオブジェクト ストアを含めることができます。オブジェクト ストア (名前によって一意に識別される) はレコードのコレクションです。各レコードにはキーと値があります。値は、1 つ以上のプロパティを持つことができるオブジェクトです。キーは、キー ジェネレーターに基づくか、キー パスから派生するか、明示的に設定することができます。一意の連続する正の整数を自動的に生成するキー ジェネレーター。キー パスはキー値へのパスを定義します。単一の JavaScript 識別子、またはピリオドで区切られた複数の識別子を指定できます。 (カラムデータベースの特性に似ています)
IndexedDB では、ほぼすべての操作で command->request->result メソッドが使用されます。たとえば、レコードをクエリすると、リクエストが返され、リクエストの結果としてクエリ結果が取得されます。別の例は、データベースを開き、リクエストを返し、リクエストの結果で返されたデータベース参照を取得することです。
indexedDB を実行するには、Web サーバーに配置する必要があります。
以上がクライアントにデータを保存する html5 のいくつかの例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。