クライアントにデータを保存する html5 のいくつかの例の詳細な説明-H5 チュートリアル-php.cn

3.indexDB

クライアントにデータを保存する html5 のいくつかの例の詳細な説明

伊谢尔伦

May 30, 2017 am 10:40 AM

1.アプリケーションキャッシュ

HTML5 ではアプリケーションキャッシュが導入されており、Web アプリケーションをキャッシュしてネットワークがない場合でも使用できるようになります。

アプリケーションキャッシュには3つの機能があります

マニフェストが指定されたすべてのページは、ユーザーがアクセスするとキャッシュされます。マニフェスト属性が指定されていない場合、ページはキャッシュされません (マニフェストファイルで直接指定されていない限り)。

マニフェストファイルの推奨ファイル拡張子は「.appcache」です。

<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
   The content of the document......
</body>
</html>

ログイン後にコピー

マニフェストファイルは、何がキャッシュされているか (何がキャッシュされていないのか) をブラウザーに伝える単純なテキストファイルです。

マニフェストファイルは 3 つの部分に分けることができます:

完全なマニフェストファイル

CACHE MANIFEST  
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html

ログイン後にコピー

HTML5 は、クライアント側でデータを保存する 2 つの新しい方法を提供します:

以前は、これはすべて 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 は、データがアクティブに削除されない限り、永続的なローカルストレージとして使用されます。

indexDB は軽量の NOSQL データベースです。インデックス作成、トランザクション処理、堅牢なクエリ機能など、Web SQL (sqlite) よりも効率的です。

その機能は次のとおりです:

Web サイトには 1 つ以上の IndexedDB データベースがある場合があり、各データベースには一意の名前が必要です。
データベースには 1 つ以上のオブジェクトストアを含めることができます。オブジェクトストア (名前によって一意に識別される) はレコードのコレクションです。各レコードにはキーと値があります。値は、1 つ以上のプロパティを持つことができるオブジェクトです。キーは、キージェネレーターに基づくか、キーパスから派生するか、明示的に設定することができます。一意の連続する正の整数を自動的に生成するキージェネレーター。キーパスはキー値へのパスを定義します。単一の JavaScript 識別子、またはピリオドで区切られた複数の識別子を指定できます。 (カラムデータベースの特性に似ています)
IndexedDB では、ほぼすべての操作で command->request->result メソッドが使用されます。たとえば、レコードをクエリすると、リクエストが返され、リクエストの結果としてクエリ結果が取得されます。別の例は、データベースを開き、リクエストを返し、リクエストの結果で返されたデータベース参照を取得することです。
indexedDB を実行するには、Web サーバーに配置する必要があります。

以上がクライアントにデータを保存する html5 のいくつかの例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。