if（Modernizr.LocalStorage）{ // LocalStorageオブジェクトを使用してデータを保存します } else { alert（ 'ブラウザがローカルストレージをサポートしていないため、ユーザーの設(shè)定を保存できません'）; } SetItem（「キー」、「?jìng)帯梗─摔瑜辍ⅴ签`タをローカルストレージに書き込むことができます。 quota_exceed_err例外は、ストレージ制限が5MBを超えるとスローされます。そのため、データを保存しながら、トライ/キャッチブロックをストレージコードに追加/キャッチすることをお?jiǎng)幛幛筏蓼埂?

<span>function setSettings() {
</span><span>if ('localStorage' in window && window['localStorage'] !== null) {
</span>	<span>try {
</span>		<span>var favcolor = document.getElementById('favcolor').value;
</span>		<span>var fontwt = document.getElementById('fontwt').value;
</span>		<span>localStorage.setItem('bgcolor', favcolor);
</span>		<span>localStorage.fontweight = fontwt;
</span>	<span>} catch (e) {
</span>		<span>if (e == QUOTA_EXCEEDED_ERR) {
</span>			<span>alert('Quota exceeded!');
</span>		<span>}
</span>	<span>}
</span>	<span>} else {
</span>		<span>alert('Cannot store user preferences as your browser do not support local storage');
</span>	<span>}
</span><span>}</span>

ブラウザに付屬の開発者ツールを使用して、データがローカルストレージに保存されているかどうかを確認(rèn)できます。たとえば、Chromeでは、ブラウザを右クリックして、要素を検査することを選択します。 [リソース]タブを選択し、[ローカルストレージアイテム]をクリックします。キー/値のペアの形で保存されているユーザー選択データを確認(rèn)できます。 Webページは、ユーザーが設(shè)定したバックグラウンドとフォントサイズの値でリロードできます。 getItem（「キー」）は、データベースに保存されているデータの取得に役立ちます。

<span>function applySetting() {
</span>	<span>if (localStorage.length != 0) {
</span>	<span>document.body.style.backgroundColor = localStorage.getItem('bgcolor');
</span>	<span>document.body.style.fontSize = localStorage.fontweight + 'px';
</span>	<span>document.getElementById('favcolor').value = localStorage.bgcolor;
</span>	<span>document.getElementById('fontwt').value = localStorage.fontweight;
</span>	<span>} else {
</span>	<span>document.body.style.backgroundColor = '#FFFFFF';
</span>	<span>document.body.style.fontSize = '13px'
</span>	<span>document.getElementById('favcolor').value = '#FFFFFF';
</span>	<span>document.getElementById('fontwt').value = '13';
</span>	<span>}
</span><span>}</span>

長(zhǎng)さ関數(shù)は、ストレージエリアの値の総數(shù)を取得します。 上記の関數(shù)は、次のようにボディタグのオンロードイベント中に呼び出すことができます clear（）関數(shù)またはremoveitem（「key」）を使用して、ローカルストレージエリアをクリアできます 関數(shù)。この例では、以下の関數(shù)は、クリアボタンのクリックイベントで呼び出されます。

<span>function clearSettings() {
</span>		<span>localStorage.removeItem("bgcolor");
</span>		<span>localStorage.removeItem("fontweight");
</span>		<span>document.body.style.backgroundColor = '#FFFFFF';
</span>		<span>document.body.style.fontSize = '13px'
</span>		<span>document.getElementById('favcolor').value = '#FFFFFF';
</span>		<span>document.getElementById('fontwt').value = '13';
</span>
<span>}</span>

ストレージイベント

Webストレージからデータを設(shè)定または削除すると、Windowオブジェクトにストレージイベントが起動(dòng)されます。リスナーをイベントに追加し、必要に応じてストレージの変更を処理できます。

<span>window.addEventListener('storage', storageEventHandler, false);
</span>	<span>function storageEventHandler(event) {
</span>			<span>applySetting();
</span>	<span>}</span>

イベントオブジェクトには、次の屬性があります

• キー - 変更されたプロパティ
• newValue - 新しく設(shè)定された値
• oldvalue - 以前に保存された値
• url - イベントが発生した場(chǎng)所からの完全なURLパス
• storagearea - localStorageまたはsessionstorageオブジェクト

イベントは他のウィンドウ（イベントがトリガーされているウィンドウではなく）でのみ発射され、データに変更がない場(chǎng)合はイベントが解雇されないことを忘れないでください。 同じAPIメソッドは、セッションストレージにも同様に適用されます。

結(jié)論

そのため、Webストレージの使用を開始してユーザーの好み、ユーザー情報(bào)、セッション情報(bào)などを保存できます。完全にオフラインで使用できるアプリを作成して、オフライン中に保存されているデータをバッチアップデートとしてサーバーに送り返すこともできます。ユーザーが再びオンラインになったとき。 HTML5 Webストレージに関するよくある質(zhì)問（FAQ）

HTML5 WebストレージのSessionStorageとLocalStorageの違いは何ですか？

HTML5 Webストレージには、SessionStorageとLocalStorageの2種類のストレージがあります。それらの主な違いは、壽命と範(fàn)囲にあります。 SessionStorageは、単一のブラウザセッションの期間中、一時(shí)的なストレージになるように設(shè)計(jì)されています。セッションが終了するとすぐに、つまり、ユーザーがブラウザタブまたはウィンドウを閉じるとすぐにクリアされます。一方、ブラウザが閉じて再開された場(chǎng)合でも、LocalStorageは持続します。有効期限がなく、ユーザーまたはWebアプリケーションによって手動(dòng)でクリアされるまで殘る。 Webストレージは簡(jiǎn)単です。 setItem（）メソッドを使用してデータを保存し、getItem（）メソッドを取得してデータを取得し、removeItem（）メソッドを削除できます。たとえば、LocalStorageにデータ項(xiàng)目を保存するには、localStorage.setItem（“ key '、' value '）を使用できます。このデータを取得するには、localStorage.getItem（「キー」）を使用します。データを削除するには、localStorage.RemoveItem（「キー」）を使用します。パスワードやクレジットカード番號(hào)などの機(jī)密のユーザー情報(bào)の保存は許可されていません。ただし、クロスサイトスクリプト（XSS）攻撃の影響を受けやすいです。したがって、保存する前に、機(jī)密情報(bào)を保存せず、データを保存する前に常にデータを検証および消毒することをお?jiǎng)幛幛筏蓼?。異なるブラウザ間。ただし、ほとんどの最新のブラウザは、LocalStorage用にドメインごとに約5MBのストレージを提供しています。 SessionStorageも同じ量のストレージを提供しますが、このストレージは一時(shí)的なものであることを覚えておくことが重要です。

すべてのブラウザでHTML5 Webストレージを使用できますか？ Chrome、Firefox、Safari、Opera、Internet Explorer 8以降を含む。ただし、使用する前にブラウザの互換性を確認(rèn)することは常に良い習(xí)慣です。

ブラウザがHTML5 Webストレージをサポートしているかどうかを確認(rèn)できますか？

JavaScriptコードで単純な「IF」條件を使用して、ブラウザがHTML5 Webストレージをサポートしているかどうかを確認(rèn)できます。 if（typeof（ストレージ）！==“ Undefined”）{// localStorage/sessionStorageのコード。 } else {//ごめんなさい！ Webストレージのサポートはありません。}

html5 Webストレージにオブジェクトまたは配列を保存できますか？ただし、Webストレージは文字列値のみをサポートするため、json.stringify（）を使用してオブジェクトまたは配列を文字列に変換する必要があります。それらを取得するには、json.parse（）を使用してそれらをオブジェクトまたは配列に戻すことができます。 Clear（）メソッドを使用したWebストレージ。たとえば、LocalStorageのすべてのデータをクリアするには、localStorage.clear（）を使用できます。オフラインアプリケーション。ユーザーのブラウザにデータを保存できます。ユーザーは、ユーザーがオフラインであってもアクセスして使用できます。 Cookie、IndexedDB、Web SQLを含むHTML5 Webストレージへ。ただし、これらのそれぞれには獨(dú)自の利點(diǎn)と短所があり、選択はWebアプリケーションの特定の要件に依存します。

以上がHTML5 Webストレージの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。