ローカルストレージは、ブラウザに分けられCookie、WebStorageそしてIndexedDBそれはWebStorageに分けることができるlocalStorageとsessionStorage。次は、これらのローカルストレージ・ソリューションの1つの分析に来ます。
クッキー
Cookie最初はそれが実際にローカルに格納されていないが、補うために行うように設計された状態管理の欠如。HTTP
HTTP 議定書は、物語はこの方法を終了し、サーバーが応答を返し、クライアントがサーバに要求を送信し、ステートレスなプロトコルであるが、彼の次の要求は、サーバーを知ることができるようにどのようにそれはクライアント？
このような背景、それが作成されますCookie。
クッキーの上の小さなテキストファイルは（クロム開発者パネルにキーと値のペアを格納するための方法の内側に、基本的に店舗内のブラウザでApplicationこの列を見ることができます）。、同じドメイン名の下にリクエストを送信し、同じクッキーを運ぶでしょう、サーバパースは、クライアントのステータスを取得することができクッキーを取得します。
クッキーの役割は十分に理解されている、のために使用されている状態の保存が、それはまた、多くの致命的な欠陥があります。
-
容量不良。ボリュームクッキーの上限のみ
4KB、情報の少量を格納するために使用されます。 -
パフォーマンス不足。クッキーのドメイン名は、特定のアドレスに続くか、クッキーが必要に関係なく、ドメイン名の、続き、要求は、要求が不要なの多くを運ぶので、その要求の数の増加に伴い、実際には、パフォーマンスの巨大な廃棄物が発生します、完全なクッキーを運ぶでしょうコンテンツ。
-
セキュリティ上の欠陥。クッキーは、ブラウザとサーバーにプレーンテキストとして通過、それは権限がないユーザが簡単に傍受することができ、その後、改ざん、一連ので、非常に危険である妥当性のクッキーにサーバに再送信されます。さらに、中に
HttpOnly偽の場合、Cookie情報は、直接JSスクリプトで読み取ることができます。
ローカルストレージ
クッキーの類似点と相違点
localStorage一つのことCookieすなわち、同じ名前で、ドメイン名のために、ある同じ、同じ期間のために保存されるのlocalStorage。
しかし、それは比較的にあるCookie、まだかなりの数の違い：
-
キャパシティ。ののlocalStorage最大容量5Mに比べ、
Cookie大幅に増加した4K。もちろん、これは、ドメイン名の5Mので、ドメイン名のために永続的です。 -
クライアントは、デフォルトでは、サーバ側との通信に関与していない、唯一の存在です。これはクッキーのを避けるために良いをもたらすパフォーマンスの問題やセキュリティ問題を。
-
インタフェースパッケージ。することにより
localStorage、およびそれによる地球への露出setItemやgetItemなどの操作方法、それは非常に便利です。
動作モード
私たちは、特定のを見て次にどのように動作しますlocalStorage。
let obj = { name: "sanyuan", age: 18 }; localStorage.setItem("name", "sanyuan"); localStorage.setItem("info", JSON.stringify(obj)); 复制代码そして、対応する値は、同じドメインに取得することができます：
let name = localStorage.getItem("name");
let info = JSON.parse(localStorage.getItem("info")); 复制代码ここに見られるように、localStorageそれが呼び出すためのオブジェクトが必要に格納されている場合、実際には、文字列に格納されている方法を、そして乾燥したオブジェクトに解決します。JSONstringifyJSON.parse
シナリオ
使用するlocalStorage大容量および耐久性特性が、使用することができるlocalStorageよう公式サイトのようないくつかのコンテンツ安定リソース、記憶するためにlogo、ストレージBase64使用ので、画像リソースのフォーマットをlocalStorage
sessionStorage
機能
sessionStorage次の用語とlocalStorage一貫性のあります：
- キャパシティ。最大容量だけでなく、5Mのため。
- クライアントは、デフォルトでは、サーバ側との通信に関与していない、唯一の存在です。
- インタフェースパッケージ。加えて、
sessionStorage名前の変更、保管、及び動作モードであるlocalStorage同じ。
しかしsessionStorage、そしてlocalStorage本質的な違いがあることは以前の唯一のセッションレベルのストレージが永続ストレージではないということです。、ページが閉じられているセッションが終了すると、この部分はsessionStorage消滅しました。
シナリオ
- それが内側になりますフォーム情報を維持することができ、フォーム情報記憶さえ損失をしないフォーム情報の前にページを更新していることを確認することができます。
- あなたは、この履歴を保存するためにそれを使用することができます。あなたが、これらのレコードせずにページを閉じた場合
sessionStorageに非常に適しています。実際、このような記憶を取るためにマイクロブログ。
IndexedDB
IndexedDBこれは、ブラウザで実行され非关系型数据库、基本的にデータベースを、そして決して桁のちょうどWebStorage 5Mによって、この能力は、理論的には制限はありません。
その使用には、この記事では、原則に焦点を当て、MDNのチュートリアル文書は非常に詳細、で興味缶を見に行っていないここで詳しく説明しているドキュメントの使用。
そして、私たちは分析するIndexedDBいくつかの重要な機能を、データベース自体に加えて、のような特性を持ち支持事务、存储二进制数据そのため、一部の機能は、特別な注意が必要です。
- キーと値のペアのストレージ。内部使用
对象仓库データを保存するために、使用してリポジトリ内のデータ・オブジェクトのキーメモリへの道を。 - 非同期操作。書き込みI / O操作に属するデータベース、ブラウザは、非同期I / Oのためのサポートを提供します
- クロスドメインのデータベースにアクセスすることはできません同一生成元ポリシーの制限によって。
概要
様々なローカルストレージとキャッシュ技術のブラウザの開発は、多くの機会をもたらすのフロントエンドアプリケーションに、PWAは、これらの優れたストレージソリューションの基盤が発展することができたもです。再櫛ローカルストレージ・ソリューション：
cookie保管には適していませんし、欠陥がたくさんあります。Web Storage含むlocalStorageとsessionStorage、デフォルトの通信サーバーに参加しません。IndexedDB大容量のデータを格納するためのインタフェースを提供し、ブラウザ上で実行するために、非リレーショナルデータベース。