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>操作は、下の図に示すように:
上記は、この記事のすべての内容です。