HTML5ローカルストレージの再訪

キーテイクアウト

WebストレージAPIの一部であるHTML5ローカルストレージは、ブラウザ、プロトコル、ポート、およびトップレベルのドメインに応じて2MBから10MBの容量を持つブラウザーのデータストレージを可能にします。 Cookieとは異なり、このデータはサーバーに送り返されず、セッションやデバイスの再起動全体で持続します。
• ローカルストレージは同期性のためにパフォーマンスを打つことができますが、モバイルデバイスのネイティブキャッシュよりも高速になる可能性があります。パフォーマンスを最適化するには、読み取りを制限し、window.onloadイベントの後にローカルストレージのみにアクセスすることをお勧めします。UIスレッドのブロックを避けます。
すべてのブラウザがプライベートモードまたはシークレットモード中にローカルストレージでアイテムの設定をサポートしているわけではなく、場合によっては、プライベートモードに保存されているデータが終了後にパージされます。ローカルストレージの安全な使用を確保するには、サポートをテストするだけでなく、アイテムを取得および設定する能力もテストすることをお勧めします。
• ローカルストレージはHTML5 WebストレージAPIの一部であり、ブラウザにデータを保存できます。 Cookieとは異なり、ローカルストレージを使用して保存されているデータはサーバーに送信されません。すべてのデータはクライアントにとどまっており、現在2MBから10MBで保存できます。この制限は、特定のブラウザ、プロトコル（HTTPまたはHTTPS）、ポート、および使用中のトップレベルドメインに関連付けられています。 この記事では、このAPIを使用してWebサイトのパフォーマンスを向上させる方法について説明します。ローカルストレージが何であり、メソッドが暴露されていることを知っていると思いますが、復習が必要な場合は、Colin IhrigによるWebストレージAPIの概要を読むことをお勧めします。

利用可能なディスクスペース

ローカルストレージの議論を開始する前に、主要なモバイルおよびデスクトップブラウザで利用可能なディスクスペースの概要を説明します。次の表は、「モバイルブラウザーのクォータを使用して作業」という記事に基づいています。

モバイルブラウザ：

ブラウザ chrome Androidブラウザ firefox iOS safari バージョン 40 4.3 34 6-8 利用可能なスペース 10MB 2MB 10MB 5MB

デスクトップブラウザ：

ブラウザ chrome オペラ firefox safari インターネットエクスプローラー バージョン 40 27 34 6-8 9-11 利用可能なスペース 10MB 10MB 10MB 5MB 10MB ネイティブキャッシュvsローカルストレージ

ローカルストレージを使用すると、データはクライアントにとどまり、セッションやデバイスの再起動全体にわたって持続します。導入部で述べたように、ローカルストレージAPIの限界は、使用中の特定のブラウザ、プロトコル、ポート、およびトップレベルのドメインに関連付けられています。対照的に、ブラウザのネイティブキャッシュで利用可能なスペースはWebサイト間で共有されており、モバイルデバイスでははるかに小さくなっています。それは頻繁に洗い流されます、時には同じ訪問内でさえも。モバイルデバイスには追加の問題があります。デスクトップデバイスよりも強力ではないため、優れたパフォーマンスを実現することは必須です。

ローカルストレージのパフォーマンスについて多くの議論がありました。たとえば、以前はMozillaと一緒にいたChristian Heilmannは、「ローカルストレージには簡単な解決策はありません」と書いています。ローカルストレージは、慎重に使用されない場合、パフォーマンスをヒットさせることができます。最初に考慮する必要があるのは、それが同期APIであるため、メインのUIスレッドをブロックすることです。ローカルストレージは、ハードドライブからデータを書き、読み取ります。これは、メモリから読むよりもはるかに高価な操作になる可能性があります。データへのアクセスを提供するために、ローカルストレージはディスクからデータを読み取る必要があり、そこでパフォーマンスヒットが発生します。このパフォーマンスヒットは、少量のデータでの大きな問題ではありませんが、フルストレージの制限を使用して顕著になる可能性があります。

良い練習として、できるだけ少数の読み取りを実行してみてください。また、同期APIを扱っているため、UIスレッドのブロックを避けるために、windol.onloadイベントが発射された後にのみローカルストレージからデータを読み取るようにしてください。

状況が変わりました

しかし、物事は良くなっています。 MobifyのPeter McLachlanが発行した記事は、ローカルストレージはモバイルデバイス上のネイティブキャッシュよりも5倍高速になる可能性があると説明しました。

同じ記事の付録では、モバイルブラウザでのローカルストレージのパフォーマンスの進化とその量が改善されたことがわかります。また、ローカルストレージは常にネイティブキャッシュよりも速くなっていることもわかります。

ローカルストレージを使用しているのは誰ですか？

クリティカルパスCSSにローカルストレージを使用しているガーディアンなど、ローカルストレージを使用してアセットをキャッシュするウェブサイトの最近のケースがいくつかあります。 Velocity Conference 2014で与えられたこのプレゼンテーションを表示して、彼らがこれをどのように行うことができるかについて詳しく理解できます。また、Smashing Magazineは最近、ローカルストレージでWebフォントのキャッシュを開始しました。この記事では、ウェブサイトで最近実装されたいくつかのパフォーマンスの改善に関するこの記事では、Webフォントの延期と、最も効果的な改善につながった変更の中でローカルストレージでそれらをキャッシュすると報告しています。

プライベートブラウジングに関するメモ

Caniuse.comで報告されているように、タブの既知の問題の下で、プライベートまたはシークレットモードで実行されるとき、Safari、iOS Safari、およびAndroidブラウザは、ローカルストレージの設定アイテムをサポートしていません。 ChromeやFirefoxなどの他のブラウザを使用すると、プライベートモードでデータをローカルストレージに保存できますが、プライベートモードを終了するとデータがパージされます。これはプライバシーの問題によるものです。誰かが永続的なデータを使用して、プライベートモードのときにユーザーのアクションについて学習する可能性があるためです。

この問題は、前のセッションに基づいて設定された値がその後の訪問時にそこにあると予想される場合、アプリケーションの動作を破る可能性があります。したがって、ローカルストレージを安全に使用するために、サポートをテストするだけでなく、アイテムを取得して設定する能力をテストすることも良い習慣です。

プライベートモードでのローカルストレージの動作と、さまざまなブラウザでローカルストレージコンテンツを確認する方法の詳細については、参照として「テスト時にプライベートブラウジングモードを確認することを忘れないでください」を使用できます。

結論

特に、レイテンシのボトルネックを避けるために使用できるモバイルデバイスで、ローカルストレージとその潜在的な使用法の再訪を開始する時が来ました。資産をキャッシュする新しい方法について考えてから、ユーザーに即座にサービスを提供することができます。型破りな方法でローカルストレージ使用の実装がすでに成功していることがわかりました。 HTML5ローカルストレージに関するよくある質問（FAQ）

HTML5ローカルストレージの最大ストレージ制限はいくらですか？

HTML5ローカルストレージの最大ストレージ制限は、さまざまなブラウザーによって異なります。ただし、ほとんどの最新のブラウザは、ドメインごとに約5MBのストレージを提供しています。これは、Cookieが提供する4kb（約4096バイト）よりも大幅に大きいです。このストレージは、個々のローカルストレージオブジェクトごとではなく、ドメインごとではないことに注意することが重要です。

HTML5ローカルストレージはどれくらい安全ですか？ HTTP Cookieとは異なり、ローカルストレージに保存されているデータは、HTTPリクエストごとにサーバーに送信されません。これは、クロスサイトスクリプティング（XSS）など、特定の種類の攻撃に対して脆弱ではないことを意味します。ただし、クロスサイトスクリプト（XSS）やクロスサイトリクエストフォーファリー（CSRF）など、他のタイプの攻撃の影響を受けやすいです。したがって、ローカルストレージにパスワードやクレジットカード番号などの機密情報を保存しないことをお勧めします。

ブラウザがHTML5ローカルストレージをサポートしているかどうかを確認するにはどうすればよいですか？

ブラウザがJavaScriptの「In」演算子を使用してHTML5ローカルストレージをサポートしているかどうかを確認できます。これは、ローカルストレージサポートをチェックする単純なコードスニペットです：

if（windof && window ['localstorage'] } else {
//ローカルストレージはサポートされていません
}

html5ローカルストレージからデータをクリアするにはどうすればよいですか？

clear（）メソッドを使用して、HTML5ローカルストレージからデータをクリアできます。この方法は、現在のドメインのローカルストレージからすべてのキー価値ペアを削除します。簡単なコードスニペットは次のとおりです。 HTML5ローカルストレージ。ただし、ローカルストレージは文字列キー値のペアのみをサポートしています。したがって、json.stringify（）を使用してオブジェクトまたは配列を文字列に変換してから保存する前に、json.parse（）を使用してオブジェクトまたは配列に戻す必要があります。ローカルストレージとセッションストレージの違いはありますか？

ローカルストレージとセッションストレージの主な違いは、寿命と範囲にあります。ローカルストレージのデータは、ブラウザーが閉じて再開されたときでも持続しますが、ページセッションが終了するとセッションストレージのデータがクリアされます。ストレージ？

localStorage.key（）メソッドとlocalStorage.getItem（）と組み合わせてシンプルなループを使用して、ローカルストレージのすべての値を反復することができます。方法。

ローカルストレージをサブドメイン間で共有できますか？各サブドメインには独自のローカルストレージがあります。

ローカルストレージデータは、異なるブラウザー間で転送できますか？各ブラウザには独自のローカルストレージがあります。

ローカルストレージクォータを超えるエラーを超えるにはどうすればよいですか？

ローカルストレージクォータを超えると、quota_exceeded_err例外がスローされます。この例外は、トライキャッチブロックでキャッチし、スペースのクリアやユーザーへの通知など、適切なアクションを実行することで処理できます。

以上がHTML5ローカルストレージの再訪の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。