クライアントにデータを保存すると、多くの問題を解決し、不必要なデータ送信を減らすことができます。
1。プログラムのステータスを保存できます。ユーザーは、ブラウザを閉じて開くとどこで動作するかを知ることができます。
2。データをキャッシュできます：毎回サーバーから変更されない多くのデータを取得する必要はありません。
3。ユーザーの好みを保存できます：この種のデータは通常、サーバーに存在する必要はありません。
以前のプラクティスHTML5ローカルストレージの前に、クライアントに永続的なデータを保存する場合、いくつかのオプションがあります。
1。HTTPCookie。 HTTP Cookieの欠点は明らかです。最大4kbのデータしか保存できず、各HTTPリクエストはサーバーに返送され、SSLを使用しない限り）送信されます。
2。つまり、userdata。 userDataは、1990年代のブラウザ戦争中にMicrosoftによって発売されたローカルストレージソリューションです。 DHTMLの動作属性を使用してローカルデータを保存するため、各ページはサイトごとに最大64kのデータと最大64万データを保存できます。 userDataの欠点は明らかです。 Web標準の一部ではありません。プログラムはIEをサポートするだけでない限り、基本的には役に立たない。
3。フラッシュクッキー。フラッシュクッキーは、実際にはHTTP Cookieと同じではありません。おそらく、その名前はフラッシュローカルストレージである必要があります。フラッシュクッキーにより、各サイトはデフォルトで100k以下のデータを保存できます。それを超えると、Flashはユーザーからより大きなストレージスペースを自動的に要求します。 Flashの外部インターフェイスインターフェイスを使用すると、JavaScriptを使用してFlashのローカルストレージを簡単に操作できます。 Flashの問題はフラッシュであるため、非常に簡単です。
4。GoogleGears。 Gearsは、2007年にGoogleがリリースしたオープンソースブラウザプラグインで、主要なブラウザーの互換性を向上させることを目指しています。 Gearsには、SQLiteに基づいて組み込みのSQLデータベースが組み込まれており、データベースにアクセスするためのUnified APIを提供します。ユーザー承認を取得した後、各サイトはSQLデータベースに無制限のデータを保存できます。 Gearsの問題は、Google自体がもはや使用していないことです。
まばゆいばかりのさまざまなテクノロジーは、ブラウザの互換性の問題につながります。ここで最も一般的なクッキーはクッキーかもしれません。
HTML5での新しいエクスペリエンス上記の問題に応じて、HTML5はより理想的なソリューションを提供します。キー/値のペアを使用して単純に解決できるデータを保存する必要がある場合は、Webストレージを使用できます。
Cookieと比較して、Webストレージには多くの利点があり、次のように要約されています。
1.より大きなストレージスペース：IE8の下の各独立したストレージスペースは10mで、他のブラウザにはわずかに異なる実装がありますが、Cookieよりもはるかに大きいです。
2。保存されたコンテンツはサーバーに送信されません：Cookieが設定されている場合、Cookieのコンテンツはサーバー上のリクエストとともに送信されます。これは、ローカルに保存されたデータの帯域幅の無駄です。 Webストレージのデータはローカルにのみ存在し、サーバーと対話しません。
3.よりリッチで使いやすいインターフェイス：Webストレージは、より豊富なインターフェイスのセットを提供し、データ操作を容易にします。
4.独立したストレージスペース：各ドメイン（サブドメインを含む）には独立したストレージスペースがあり、各ストレージスペースは完全に独立しているため、データの混乱を引き起こしません。
Webストレージ分類Webストレージは、実際にはSessionStorageとLocalStorageの2つの部分で構成されています。
SessionStorageは、ローカルでセッションにデータを保存するために使用されます。これは、同じセッションのページでのみアクセスでき、セッションが終了した後にデータは破棄されます。したがって、SessionStorageは永続的なローカルストレージではなく、セッションレベルのストレージのみです。
LocalStorageは永続的なローカルストレージに使用され、データが積極的に削除されない限り、データは決して期限切れになりません。
Webストレージがサポートされているかどうかを確認してくださいWebストレージは主要な主流のブラウザでサポートされていますが、古いブラウザと互換性があるため、このテクノロジーを使用できるかどうかを確認する必要があります。
最初の方法：ストレージオブジェクトが存在するかどうかを確認して、ブラウザがWebストレージをサポートするかどうかを確認してください。
if（typeof（storage）！== "undefined"）{
// はい！ LocalStorageとSessionStorageのサポート！
//いくつかのコード...
} それ以外 {
// ごめん！ Webストレージサポートはありません。
}
2番目の方法は、LocalStorageがサポートするかどうかを確認するなど、それぞれのオブジェクトを個別に確認することです。
if（typeof（localstorage）== 'undefined'）{
Alert（ 'ブラウザはHTML5 LocalStorageをサポートしていません。アップグレードを試してください。'）;
} それ以外 {
// はい！ LocalStorageとSessionStorageのサポート！
//いくつかのコード...
}
または：
if（windole && window ['localstorage']！== null）のif（ 'localstorage'] {
// はい！ LocalStorageとSessionStorageのサポート！
//いくつかのコード...
} それ以外 {
Alert（ 'ブラウザはHTML5 LocalStorageをサポートしていません。アップグレードを試してください。'）;
}
または
if（!! localstorage）{
// はい！ LocalStorageとSessionStorageのサポート！
//いくつかのコード...
} それ以外 {
Alert（ 'ブラウザはHTML5 LocalStorageをサポートしていません。アップグレードを試してください。'）;
}
明らかに、最初の方法は最も直接的でシンプルです。
Webストレージの使用Webストレージはキーと価値のペアを保存し、ブラウザはそれを文字列として保存します。必要に応じて、それらを他の形式に変換することを忘れないでください。
SessionStorageとLocalStorageのさまざまな使用を除いて、メンバーリストは同じです。
key = value：キー値のペアを保存します
setItem（key、value）：キーと値のペアを保存します
getItem（key）：キー値ペアを取得します
removeItem（key）：すべてのキー価値ペアを削除します
clear（）：すべてのキー価値ペアをクリアします
長さ：キー価値のペアの数
ここでは、setitem（key、value）メソッドの値タイプは理論的にはあらゆるタイプにすることができますが、実際、ブラウザは値toStringメソッドを呼び出して文字列値を取得してローカルに保存します。したがって、それがカスタムタイプの場合、自分で意味のあるToStringメソッドを定義する必要があります。たとえば、次の例はjson.stringifyと併用して使用されます。
var person = {'name'： 'rainman'、 'age'：24};
localStorage.setItem（ "me"、json.stringify（person））;
json.parse（localstorage.getitem（ 'me'））。name; //「レインマン」
/**
* json.stringify、jsonデータを文字列に変換します
* json.stringify（{'name'： 'fred'、 'age'：24}）; // '{"name"： "fred"、 "age"：24}'
* json.stringify（['a'、 'b'、 'c']）; // '["a"、 "b"、 "c"]'
* json.parse、json.stringifyを解決する
* json.parse（ '["a"、 "b"、 "c"]'）// ["a"、 "b"、 "c"]]
*/
さらに、キー価値ペアを追加する場合、追加の数が多い場合、制限を超える例外があるかどうかを確認する方が安全です。
試す {
localStorage.setItem（itemid、values.join（ ';'））;
} catch（e）{
if（e == quota_exceeded_err）{
アラート（ 'クォータを超えた！'）;
}
}
Webストレージの方法は非常に簡単です。次の例は、ボタンのクリック数をカウントすることです。
<！doctype html>
<html>
<head>
<スクリプト>
関数clickcounter（）
{
if（typeof（ストレージ）！== "未定義"）
{
if（localstorage.clickcount）
{
LocalStorage.ClickCount = number（localStorage.clickCount）+1;
}
それ以外
{
localstorage.clickcount = 1;
}
document.getElementById（ "result"）。innerhtml = "ボタンをクリックしました" + localstorage.clickcount + "time（s）。";
}
それ以外
{
document.getElementById（ "result"）。innerhtml = "申し訳ありませんが、ブラウザはWebストレージをサポートしていません...";
}
}
</script>
</head>
<body>
<p> <ボタンonclick = "clickcounter（）" type = "button">クリックしてください！</button> </p>
<div id = "result"> </div>
<p>ボタンをクリックして、カウンターの増加を確認します。</p>
<p>ブラウザタブ（またはウィンドウ）を閉じて再試行すると、カウンターがカウントされ続けます（リセットされません）。</p>
</body>
</html>
上記の例では、LocalStorageをSessionStorageに変更し、ボタンを何度かクリックして、ブラウザを閉じる前後に効果を確認できます。
既存の問題Webストレージの欠陥は主にそのセキュリティに集中しており、次の2つのポイントに反映されています。
1.ブラウザは各ドメインに独立したストレージスペースを割り当てます。つまり、スクリプトはドメインAのドメインBのストレージスペースにアクセスできませんが、ブラウザはスクリプトの位置にあるドメインが現在のドメインと同じかどうかを確認しません。つまり、ドメインbのドメインAに埋め込まれたスクリプトは、ドメインBのデータにアクセスできます。
2。ローカルに保存されているデータは暗号化されておらず、期限切れになることはありません。これは、プライバシーの漏れを引き起こすのは非常に簡単です。
さらに、より多くのセキュリティ関連の問題については、実際のリファレンスのリンクを後で参照してください。
他の仕様のリスト（理解のみを理解するために、いつでも消えます）Webデータベース
古いHTML5の提案では、複雑なデータを保存する必要がある場合は、SQLをクライアントプログラムのように使用できるWebデータベースを使用できます（Webデータベース標準が放棄されたため、簡単な言及があります）。 GlobalStorageこれはHTML5でも提案されています。ブラウザが閉じた後、GlobalStorageを使用して保存されている情報は引き続き保持されます。 LocalStorageと同様に、ドメイン内の任意のページに保存されている情報は、すべてのページで共有できますが、現在Firefoxのみがサポートしています。
基本的な構文：
•GlobalStorage ['developer.mozilla.org'] - developer.mozilla.orgの下のすべてのサブドメインは、この名前空間ストレージオブジェクトを介して読み書きできます。
•GlobalStorage ['mozilla.org'] - mozilla.orgドメイン名の下のすべてのWebページは、この名前空間ストレージオブジェクトを介して読み書きできます。
•GlobalStorage ['org'] - .orgドメイン名の下のすべてのWebページは、この名前空間ストレージオブジェクトを介して読み書きできます。
•GlobalStorage [''] - ドメイン名の下のすべてのWebページは、この名前空間ストレージオブジェクトを介して読み書きできます。
メソッドプロパティ：
•setItem（key、value） - キー値を設定またはリセットします。
•getItem（key） - キー値を取得します。
•removeItem（key） - キー値を削除します。
•キー値を設定します：window.globalStorage [planabc.net] .key = value;
•キー値を取得します：value = window.globalStorage [planabc.net] .key;
その他の機能：
•有効期限はLocalStorageと同じであり、他のいくつかの機能もLocalStorageに似ています。
•Firefoxは、現在のドメインの下でのGlobalStorageストレージのみをサポートするようになりました。共通ドメインを使用すると、同様のエラーセキュリティエラーコードが発生します：1000。
indexeddb最後に、indexedDBを紹介します。他の2つの仕様と比較して、Firefoxのみが現在IndexEdDBを実装しています（ちなみに、MozillaはWeb SQLデータベースを実装しないと述べています）が、GoogleはChromeへのIndexDBサポートの追加を検討していると述べています。
indexedDBは、レコードをデータベースに保存できるSQLデータベースに少し似ており、各レコードには多くのフィールドを持つことができるSQLデータベースの概念を紹介します。各フィールドには特定のデータ型があり、レコードのサブセットを選択して、オブジェクトストアのすべての変更がトランザクションベースです。
詳細については、使用状況のリファレンスでFirefoxのIndexEdDBに関するドキュメントを参照してください。
実用的なリファレンス：公式文書：http：//www.w3schools.com/html5/
テンプレートの心配：http：//www.cuoxin.com/w3school/html5/
ローカルストレージのセキュリティ：http：//www.mhtml5.com/2012/03/4586.html
Firefoxの実験機能indexedDB：https：//developer.mozilla.org/en-us/docs/indexeddb