ホームページ > 記事 > ウェブフロントエンド > Raid on HTML5 Javascript API Extension 3 — ローカル storage_html5 チュートリアル スキルの新しい体験
Raid on HTML5 Javascript API Extension 3 — ローカル storage_html5 チュートリアル スキルの新しい体験
- WBOYオリジナル
- 2016-05-16 15:50:011394ブラウズ
データをクライアントに保存する必要があるのはなぜですか?
クライアントにデータを保存すると、多くの問題が解決され、不必要なデータ送信が削減されます。
1. プログラムのステータスを保存できます。ユーザーは、ブラウザを閉じて開いた後、どこで作業していたかを知ることができます。それをまた。
2. データをキャッシュする機能: 変化しない大量のデータについて、毎回サーバーからデータを取得する必要はありません。
3. ユーザー設定を保存できる: この種のデータは通常、サーバーに保存する必要はありません。
以前のアプローチ
HTML5 ローカル ストレージが登場する前は、クライアントに永続的なデータを保存したい場合、いくつかのオプションがありました。
1. HTTP Cookie。 HTTP Cookie の欠点は明らかで、保存できるデータは 4KB までしかなく、各 HTTP リクエストは (SSL を使用しない限り) クリア テキストでサーバーに送信されます。
2. IE ユーザーデータ。 userData は、1990 年代のブラウザ戦争中に Microsoft が立ち上げたローカル ストレージ ソリューションで、DHTML の動作属性を使用して、各ページに最大 64K のデータを保存し、各サイトに最大 640K のデータを保存できます。 userData の欠点は明らかです。これは Web 標準の一部ではないため、アプリケーションが IE のみをサポートする必要がある場合を除き、ほとんど役に立ちません。
3. フラッシュクッキー。 Flash Cookie は、実際には HTTP Cookie と同じものではありません。おそらく、その名前は「Flash ローカル ストレージ」と呼ぶべきでしょう。Flash Cookie では、デフォルトで各 Web サイトに 100K を超えるデータしか保存できません。それを超えると、Flash は自動的に更新を要求します。 Flash の ExternalInterface インターフェイスを利用すると、JavaScript を通じて Flash のローカル ストレージを簡単に操作できます。 Flash の問題は、それが Flash であるということだけです。
4. Google Gears。 Gears は、Google が 2007 年にリリースしたオープンソースのブラウザ プラグインで、主要なブラウザの互換性を向上させることを目的としており、SQLite に基づく組み込み SQL データベースを備えており、ユーザーを取得した後にデータベースにアクセスするための統合 API を提供します。 Gears の問題は、Google 自体がそれを使用しなくなったことです。
目まぐるしく多様なテクノロジーは、ブラウザーの互換性の問題を引き起こします。おそらくここで誰もが最もよく使用するものは Cookie です。
HTML5 の新しいエクスペリエンス
上記の問題に対応して、HTML5 はより理想的なソリューションを提供します。保存する必要があるものが単なるキーと値のペアであれば、それを解決できるデータです。 Webストレージを利用することができます。
Cookie と比較すると、Web ストレージには次のように多くの利点があります:
1. より大きなストレージ スペース: IE8 ではそれぞれの独立したストレージ スペースは 10M で、他のブラウザーの実装は若干異なりますが、それよりもはるかに大きくなります。クッキーよりも。
2. 保存されたコンテンツはサーバーに送信されません。Cookie が設定されると、Cookie のコンテンツがリクエストとともにサーバーに送信されます。これは、ローカルに保存されたデータの帯域幅を無駄にします。 Web Storage 内のデータはローカルにのみ存在し、サーバーとは一切対話しません。
3. より豊富で使いやすいインターフェース: Web Storage は、より豊富なインターフェースを提供し、データ操作を容易にします。
4. 独立したストレージ スペース: 各ドメイン (サブドメインを含む) には独立したストレージ スペースがあるため、データが混乱することはありません。
Web ストレージの分類
Web ストレージは、実際には sessionStorage と localStorage の 2 つの部分で構成されます。
sessionStorage は、セッション内のデータをローカルに保存するために使用されます。これらのデータには、同じセッション内のページからのみアクセスでき、セッションが終了するとデータは破棄されます。したがって、sessionStorage は永続的なローカル ストレージではなく、セッション レベルのストレージにすぎません。
LocalStorage は、データがアクティブに削除されない限り、永続的なローカル ストレージとして使用されます。
Web Storage がサポートされているかどうかを確認します
Web Storage はすべての主要なブラウザでサポートされていますが、古いブラウザとの互換性を確保するには、このテクノロジーが使用できるかどうかを確認する必要があります。
最初の方法: Storage オブジェクトが存在するかどうかを確認して、ブラウザが Web Storage をサポートしているかどうかを確認します:
if(typeof(Storage)!=="unknown"){
// はい! localStorage と sessionStorage のサポート
// 一部のコード。 ..
} else {
// 申し訳ありませんが、Web ストレージはサポートされていません。
}
2 番目の方法は、それぞれのオブジェクトを個別に確認することです。 localStorage がサポートするかどうか:
if (typeof(localStorage) == '未定義' ) {
alert('お使いのブラウザは HTML5 localStorage をサポートしていません。アップグレードしてください。');
} else {
//はい! localStorage と sessionStorage をサポートしています!
// 一部のコード....
}
または:
if('localStorage' in window && window['localStorage'] !== null) {
// はい! localStorage と sessionStorage がサポートされています!
// 一部のコード....
} else {
alert('お使いのブラウザは HTML5 localStorage をサポートしていません。アップグレードしてください。') ;
}
または
if (!!localStorage) {
// はい! localStorage と sessionStorage のサポート!
} else {
alert('お使いのブラウザは HTML5 localStorage をサポートしていません。アップグレードしてみてください。');
}
明らかに、最初の方法が最も直接的で簡単です。
Web ストレージの使用法 Web ストレージはキーと値のペアを保存し、ブラウザはそれらを文字列として保存します。必要に応じて、忘れずに他の形式に変換してください。
用途が異なる場合を除き、sessionStorage と localStorage は同じメンバー リストを持ちます:
try {
クライアントにデータを保存すると、多くの問題が解決され、不必要なデータ送信が削減されます。
1. プログラムのステータスを保存できます。ユーザーは、ブラウザを閉じて開いた後、どこで作業していたかを知ることができます。それをまた。
2. データをキャッシュする機能: 変化しない大量のデータについて、毎回サーバーからデータを取得する必要はありません。
3. ユーザー設定を保存できる: この種のデータは通常、サーバーに保存する必要はありません。
以前のアプローチ
HTML5 ローカル ストレージが登場する前は、クライアントに永続的なデータを保存したい場合、いくつかのオプションがありました。
1. HTTP Cookie。 HTTP Cookie の欠点は明らかで、保存できるデータは 4KB までしかなく、各 HTTP リクエストは (SSL を使用しない限り) クリア テキストでサーバーに送信されます。
2. IE ユーザーデータ。 userData は、1990 年代のブラウザ戦争中に Microsoft が立ち上げたローカル ストレージ ソリューションで、DHTML の動作属性を使用して、各ページに最大 64K のデータを保存し、各サイトに最大 640K のデータを保存できます。 userData の欠点は明らかです。これは Web 標準の一部ではないため、アプリケーションが IE のみをサポートする必要がある場合を除き、ほとんど役に立ちません。
3. フラッシュクッキー。 Flash Cookie は、実際には HTTP Cookie と同じものではありません。おそらく、その名前は「Flash ローカル ストレージ」と呼ぶべきでしょう。Flash Cookie では、デフォルトで各 Web サイトに 100K を超えるデータしか保存できません。それを超えると、Flash は自動的に更新を要求します。 Flash の ExternalInterface インターフェイスを利用すると、JavaScript を通じて Flash のローカル ストレージを簡単に操作できます。 Flash の問題は、それが Flash であるということだけです。
4. Google Gears。 Gears は、Google が 2007 年にリリースしたオープンソースのブラウザ プラグインで、主要なブラウザの互換性を向上させることを目的としており、SQLite に基づく組み込み SQL データベースを備えており、ユーザーを取得した後にデータベースにアクセスするための統合 API を提供します。 Gears の問題は、Google 自体がそれを使用しなくなったことです。
目まぐるしく多様なテクノロジーは、ブラウザーの互換性の問題を引き起こします。おそらくここで誰もが最もよく使用するものは Cookie です。
HTML5 の新しいエクスペリエンス
上記の問題に対応して、HTML5 はより理想的なソリューションを提供します。保存する必要があるものが単なるキーと値のペアであれば、それを解決できるデータです。 Webストレージを利用することができます。
Cookie と比較すると、Web ストレージには次のように多くの利点があります:
1. より大きなストレージ スペース: IE8 ではそれぞれの独立したストレージ スペースは 10M で、他のブラウザーの実装は若干異なりますが、それよりもはるかに大きくなります。クッキーよりも。
2. 保存されたコンテンツはサーバーに送信されません。Cookie が設定されると、Cookie のコンテンツがリクエストとともにサーバーに送信されます。これは、ローカルに保存されたデータの帯域幅を無駄にします。 Web Storage 内のデータはローカルにのみ存在し、サーバーとは一切対話しません。
3. より豊富で使いやすいインターフェース: Web Storage は、より豊富なインターフェースを提供し、データ操作を容易にします。
4. 独立したストレージ スペース: 各ドメイン (サブドメインを含む) には独立したストレージ スペースがあるため、データが混乱することはありません。
Web ストレージの分類
Web ストレージは、実際には sessionStorage と localStorage の 2 つの部分で構成されます。
sessionStorage は、セッション内のデータをローカルに保存するために使用されます。これらのデータには、同じセッション内のページからのみアクセスでき、セッションが終了するとデータは破棄されます。したがって、sessionStorage は永続的なローカル ストレージではなく、セッション レベルのストレージにすぎません。
LocalStorage は、データがアクティブに削除されない限り、永続的なローカル ストレージとして使用されます。
Web Storage がサポートされているかどうかを確認します
Web Storage はすべての主要なブラウザでサポートされていますが、古いブラウザとの互換性を確保するには、このテクノロジーが使用できるかどうかを確認する必要があります。
最初の方法: Storage オブジェクトが存在するかどうかを確認して、ブラウザが Web Storage をサポートしているかどうかを確認します:
コードをコピー
コードは次のとおりです:if(typeof(Storage)!=="unknown"){
// はい! localStorage と sessionStorage のサポート
// 一部のコード。 ..
} else {
// 申し訳ありませんが、Web ストレージはサポートされていません。
}
2 番目の方法は、それぞれのオブジェクトを個別に確認することです。 localStorage がサポートするかどうか:
コードをコピーします
コードは次のとおりです:if (typeof(localStorage) == '未定義' ) {
alert('お使いのブラウザは HTML5 localStorage をサポートしていません。アップグレードしてください。');
} else {
//はい! localStorage と sessionStorage をサポートしています!
// 一部のコード....
}
または:
if('localStorage' in window && window['localStorage'] !== null) {
// はい! localStorage と sessionStorage がサポートされています!
// 一部のコード....
} else {
alert('お使いのブラウザは HTML5 localStorage をサポートしていません。アップグレードしてください。') ;
}
または
if (!!localStorage) {
// はい! localStorage と sessionStorage のサポート!
} else {
alert('お使いのブラウザは HTML5 localStorage をサポートしていません。アップグレードしてみてください。');
}
Web ストレージの使用法 Web ストレージはキーと値のペアを保存し、ブラウザはそれらを文字列として保存します。必要に応じて、忘れずに他の形式に変換してください。
用途が異なる場合を除き、sessionStorage と localStorage は同じメンバー リストを持ちます:
コードをコピーコードは次のとおりです。
key = value: キーと値のペアを格納
setItem(key, value): キーと値のペアを格納
getItem(key): キーと値のペアを取得
removeItem(key ): すべてのキーと値のペアを削除します
clear(): すべてのキーと値のペアを削除します
length: キーと値のペアの数
強調する必要がありますここに: setItem(key,value ) メソッドは理論的には任意の型にできますが、実際には、ブラウザーは value の toString メソッドを呼び出して文字列値を取得し、ローカルに保存します。そのため、カスタム型の場合は、次のように定義する必要があります。自分で意味のある toString メソッドを作成します。たとえば、次の例は JSON.stringify と組み合わせて使用されます。 setItem(key, value): キーと値のペアを格納
getItem(key): キーと値のペアを取得
removeItem(key ): すべてのキーと値のペアを削除します
clear(): すべてのキーと値のペアを削除します
length: キーと値のペアの数
コードをコピーしますコードは次のとおりです:
var person = {'name': 'rainman', 'age': 24};
localStorage.setItem("me", JSON.stringify(person)); >JSON.parse(localStorage.getItem( 'me')).name; // 'rainman'
/**
* JSON.stringify、JSON データを文字列に変換します
* JSON.stringify({'name': 'fred', 'age': 24}); // '{"name":"fred ", "年齢":24}'
* JSON.stringify(['a', 'b', 'c']) // '["a","b","c"]'
* JSON.parse、逆JSON.stringify
* JSON.parse('["a","b","c"]') // ["a","b","c" ]
*/
また、Key-Valueを追加する場合追加された数が比較的大きい場合は、ペアを比較します。安全な方法は、制限を超える例外があるかどうかを確認することです:
localStorage.setItem("me", JSON.stringify(person)); >JSON.parse(localStorage.getItem( 'me')).name; // 'rainman'
/**
* JSON.stringify、JSON データを文字列に変換します
* JSON.stringify({'name': 'fred', 'age': 24}); // '{"name":"fred ", "年齢":24}'
* JSON.stringify(['a', 'b', 'c']) // '["a","b","c"]'
* JSON.parse、逆JSON.stringify
* JSON.parse('["a","b","c"]') // ["a","b","c" ]
*/
また、Key-Valueを追加する場合追加された数が比較的大きい場合は、ペアを比較します。安全な方法は、制限を超える例外があるかどうかを確認することです:
コードをコピーします コードは次のとおりです。
localStorage.setItem(itemId,values.join(';'));
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
alert( 'クォータを超えました!');
}
}
Web Storage のメソッドは非常に簡単です。例では、ボタンのクリック数をカウントします:
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
alert( 'クォータを超えました!');
}
}
Web Storage のメソッドは非常に簡単です。例では、ボタンのクリック数をカウントします:
コードをコピーコードは次のとおりです: