HTML5 Webストレージ-jsチュートリアル-php.cn

HTML5 Web Storage if（Modernizr.LocalStorage）{ // LocalStorageオブジェクトを使用してデータを保存します } else { alert（ 'ブラウザがローカルストレージをサポートしていないため、ユーザーの設定を保存できません'）; } SetItem（「キー」、「値」）により、データをローカルストレージに書き込むことができます。 quota_exceed_err例外は、ストレージ制限が5MBを超えるとスローされます。そのため、データを保存しながら、トライ/キャッチブロックをストレージコードに追加/キャッチすることをお勧めします。

<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>

ログイン後にコピー

ブラウザに付属の開発者ツールを使用して、データがローカルストレージに保存されているかどうかを確認できます。たとえば、Chromeでは、ブラウザを右クリックして、要素を検査することを選択します。 [リソース]タブを選択し、[ローカルストレージアイテム]をクリックします。キー/値のペアの形で保存されているユーザー選択データを確認できます。 Webページは、ユーザーが設定したバックグラウンドとフォントサイズの値でリロードできます。 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>

ログイン後にコピー

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

<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ストレージからデータを設定または削除すると、Windowオブジェクトにストレージイベントが起動されます。リスナーをイベントに追加し、必要に応じてストレージの変更を処理できます。

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

ログイン後にコピー

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

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

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

結論

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

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

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

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

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

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