HTML4 ERAのサイズ、形式、およびストレージデータ形式の制限により、Webサイトアプリケーションがブラウザに情報の一部を保存する場合、Cookieの使用にのみ使用できます。ただし、Cookieのこれらの制限は、Cookieなどの単純なデータにもつながり、IDなどの識別子のみを保存できます。
以下は、Cookieの制限です。
ほとんどのブラウザは、最大4096バイトでCookieをサポートしています。
ブラウザは、ユーザーコンピューターに保存されているCookieの数も制限します。ほとんどのブラウザは、各サイトが20個のCookieを保存することのみを許可します。
一部のブラウザは、すべてのサイト（通常300）から受け入れるCookieの総数に絶対的な制限をもたらします。
Cookieのデフォルトの状況は、HTTPリクエストでバックグラウンドサーバーに送信されますが、すべてのリクエストには、JS、CSS、写真、その他のリクエストなどのCookieがCookieを必要としません。
Cookieの一連の制限をクラックするために、HTML5はJSの新しいAPIを介して大量のデータをクライアントブラウザに直接保存でき、複雑なローカルデータベースをサポートしてJSをより効率的にします。 HTML5は2種類のWebStorageをサポートしています。
H5に保存されている2つのAPIがあり、1つはWebストレージ、もう1つはWeb SQLです。 JavaScript言語に基づいているものに関係なく、Webストレージの使用方法をお知らせします
3。WebストレージHTML5は、ローカルストレージ標準のWebストレージを定義し、2つのストレージタイプのAPIを提供します。
1。ローカルストレージはローカルに保存されており、データストレージは操作を削除しない限り。 2番目、2年、または翌年の後、データは引き続き利用可能です。機能：domainドメイン内の安全で永続的な保存。つまり、クライアントまたはブラウザの同じドメイン名のすべてのページがローカルストレージデータにアクセスでき、削除を除いてデータが永続的に保存されますが、クライアントまたはブラウザ間のデータは互いに独立しています。
httpリクエストでは、データはバックグラウンドサーバーに送信されません。
html5標準で少なくとも4MBをサポートするためにブラウザが必要であるため、ストレージデータの機会を考慮しないでください。
例を見てください：
コードは次のとおりです。
関数clickCounter（）{ifof（typeof（storage）！== undefined）{if（localstorage.clickcount）{localStorage.clickcount = number（localStorage.cl ickcount）+1;} else {localStorage.clickcount = 1;}ドキュメント。 getElementById（result）.innerhtml =既に[ボタン + localStorage.clickcount + times;} else {document.getElementById（result）.innerhtml =申し訳ありませんが、ブラウザーはWebストレージをサポートしていません。 ;}} </script> <p> <ボタンonclick = clickcounter（）type = button>私をクリックしてください！ </button> </p> <div id = result> </div> <p>ボタンをクリックして、カウンターの増加を表示します。 </p> <p>ブラウザタブ（またはウィンドウ）をオフにし、このページを再開すると、カウンターがカウントされ続けます（リセットされません）。 </p> 2.SessionStorageはセッション中に効果的であり、ブラウザが閉じた後にデータが自動的に削除されます。機能：セッション制御、短期保存。セッションの概念は、サーバー側のセッション概念に似ています。
互換性
注：IE9 LocalStorageは、ローカルファイルをサポートする必要があります。
現在、すべての主流のブラウザは、HTML5のWebストレージ機能をある程度サポートしています。 上の図からわかるように、基本的にすべての最新のブラウザはWebストレージをサポートしています。
AndroidプラットフォームとiOSプラットフォームのそれぞれのブラウザは、基本的にWebストレージのローカルストレージ特性をサポートしています。 Android携帯電話とiPhoneに加えて、市場にある現在のモバイルデバイスはますますタブレットであり、基本的に2つのプラットフォームに依存しています。モバイル端末でWebストレージを使用すると、もちろんコードの厳密さから、ブラウザがサポートされるかどうかを検討する必要はありません。
以下は検出方法です。
if（window.localStorage）{// browser supports localstorage} else {// support} if（window.sessionstorage）{// browser supports sessionstorage} 3。LocalStorageHTML5のローカルストレージAPIのLocalStorageは、sessionStorageと同じです。 LocalStorageを例として取り、HTML5のローカルストレージを簡単に導入し、Traversalなどの一般的な問題の例をいくつか作成します。 LocalStorageは、アクセスデータにキー値のペアを使用して局所的に保存されているAPIです。アクセスデータは文字列のみです。ブラウザごとに、使用方法、最大ストレージスペースなど、APIのサポートが異なります。
ストレージ方法：キー価値のある方法でのストレート文字列。主なアプリケーション：ショッピングカート、顧客ログイン、ゲームアーカイブ。エッセンスエッセンス予約されたデータ型：配列、写真、JSON、スタイル、スクリプト。エッセンスエッセンス（文字列コンテンツにシリアル化できる限り、保存できます）ストレージアドレス： C：/users/15014/appdata/local/google/chrome/chrome/user data/default/localストレージ（異なるコンピューターは異なります。隠しファイルディスプレイを開く必要がありますが、このフォルダーを見つけるにはローカルストレージを検索できます。 Cドライブ。LocalStorageは、ローカルストレージで関連操作を実行するのに役立つ4つの方法を提供します。
（1）localStorage.setItem（キー名、キー値）その中で、最初のパラメーターキーはデータの識別子を表し、2番目のパラメーターキー値は、この値があることです。これの値は、この値がパラメーターの値であるという値であるということです。のように：
LocalStorage.SetItem（Zhang San）; 28のデータのキー値
（2）localStorage.getItem（キー名）ローカルエリアに保存されているデータを読み取り、キー名を介して対応するキー名データをパラメーターとして読み取ります。のように：
var data = localstorage.getitem（name）;
（3）LocalStorage.RemoveItem（キー名）ローカルエリアに保存されているデータを削除し、パラメーターとしてキー名を介して対応するキー名データを削除します。のように：
var data2 = localstorage.removeitem（name）;
（4）localStorage.clear（）局所的に保存されているすべてのデータを削除します。のように：
localStorage.clear（）局所的に保存されているすべてのデータを削除します。など：localstorage.clear（）;
（5）さらに、SessionStorageの4つの機能は、基本的に上記のLocalStorageクラスの関数使用と同じであり、詳細に説明しません。
以下は小さな例です。
<script/javascript.setItem（Zhang San）（Age、28）; VERIFY（）; //名前と年齢が存在するかどうかを確認し、vector（）{var type = localstorage.getitem（nam e）に存在するかどうかを確認します.getItem（age）;タイプ： 'Alert： + /n /n + agi cure;} < /script 3。LocalStorageの満了戦略HTML5はローカルストレージの有効期限戦略を設定していないため、次のように、データ処理データの有効期限戦略を処理する際に、有効期限戦略プログラムを作成できます。
<！タイトル> </head> <body> </html> <script> function set（key、varcurtime = new date（）; ：value、time：curtime}}））; '結果：json.parse（str）オブジェクト代理店：23名：huangxiaojian __proto__：オブジェクト注：{}を除いて、各属性名は二重の引用符である必要があります。 json.stringify（）は、var a = {a：1、b：2}などのオブジェクトから文字列を解決するために使用されます。 get（key、exp）// expは設定の有効期間です{var value = localstorage.getitem（key）; （new Date（new Date）（）.getTime（）-Dataobj.time> exp）// curipation時に設定された現在の時間の場合迅速な有効化} else {console（value =+dataobj.val）;} </script>操作は、下の図に示すように：
上記は、この記事のすべての内容です。