web-dev-qa-db-ja.com

LocalStorage、sessionStorage、session、およびcookiesの違いは何ですか？

LocalStorage、sessionStorage、session、cookieの技術的な長所と短所は何ですか？また、どちらを使用するのですか？

html5cookieslocal-storagesession-storage
445
Pank

これは非常に広い範囲の質問であり、多くの賛否両論が状況に即したものになるでしょう。

全ての場合において、これらの記憶機構は個々のコンピュータ／装置上の個々のブラウザに特有のものとなる。セッションをまたがって継続的にデータを保存するという要件は、アプリケーションサーバー側で行う必要があります。最も可能性が高いのはデータベースですが、XMLまたはtext/CSVファイルの使用です。

localStorage、sessionStorage、およびcookieはすべてクライアントストレージソリューションです。セッションデータは直接管理下にあるサーバーに保持されます。

localStorageとsessionStorage

localStorageとsessionStorageは比較的新しいAPI（つまり、すべてのレガシーブラウザがそれらをサポートするわけではない）で、永続性を除いてほぼ同じです（APIと機能の両方）。 sessionStorage（名前が示すように）はブラウザセッションの間だけ利用可能です（そしてタブまたはウィンドウが閉じられると削除されます） - しかし、ページのリロードを生き残った後は存続します（source DOM Storageガイド - Mozilla Developer Network ）。

明らかに、保存しているデータが継続的に利用可能である必要があるならば、localStorageはsessionStorageよりも望ましいです - どちらにしてもデータの継続的存在に頼るべきではないので両方ともユーザーによってクリアできるので注意してください。

localStorageおよびsessionStorageは、ページ間でクライアントスクリプト内で必要とされる機密でないデータを永続化するのに最適です（たとえば、設定、ゲーム内のスコア）。 localStorageおよびsessionStorageに格納されているデータは、クライアント/ブラウザ内から簡単に読み取ったり変更したりすることができるので、機密データまたはセキュリティ関連データをアプリケーション内に格納することに依存しないでください。

クッキー

これはCookieにも当てはまります。ユーザーがこれらを簡単に改ざんしたり、プレーンテキストでデータを読み取ったりすることもできます。したがって、機密データを保存する場合は、セッションが唯一の選択肢です。 SSLを使用していない場合は、特にオープンwifiで、Cookie情報が送信中に傍受される可能性もあります。

プラス面としては、クロスサイトスクリプティング（XSS）/スクリプトインジェクションのようなセキュリティリスクからある程度の保護を受けることができます。これは、最新の（サポート）ブラウザではJavaScriptへのアクセスとJavaScriptへのアクセスを防ぐことを意味します。これはまたあなた自身の合法的なJavaScriptがそれらにアクセスするのを防ぎます。これは、ログオンしているユーザーの詳細を含むトークンを保存するために使用される認証Cookieで特に重要です。そのCookieのコピーを持っている場合は、あらゆる目的や目的のために、そのユーザーをなり Webアプリケーションに関する限り、ユーザーと同じデータおよび機能へのアクセス権を持ちます。

Cookieは認証目的およびユーザーデータの永続化に使用されるため、[すべての]同じドメインへの要求に対して、ページに有効なall cookieがブラウザからサーバーに送信されます。それ以降のAjaxリクエスト、すべての画像、スタイルシート、スクリプト、フォント。このため、Cookieを使用して大量の情報を保存しないでください。ブラウザは、クッキーに保存できる情報のサイズに制限を課すこともあります。通常、Cookieは認証、セッション、および広告追跡のための識別トークンを格納するために使用されます。トークンは通常、それ自体は人間が読める情報ではなく、アプリケーションまたはデータベースにリンクされた暗号化された識別子です。

localStorageとsessionStorageとCookie

機能の面では、cookies、sessionStorage、localStorageは文字列を格納することしかできません - 設定時に暗黙的にプリミティブ値を変換することは可能です（読み込み後にそれらを型として使用するために逆変換する必要があります）。 （APIを使用してそれらを保管するためにJSONを直列化することは可能です）。セッションストレージでは、通常、サーバーサイドの言語/フレームワークでサポートされているプリミティブやオブジェクトを保存できます。

クライアントサイドとサーバーサイド

HTTPはステートレスプロトコルであるため、WebアプリケーションはWebサイトに戻るときに前回の訪問からユーザーを識別することはできません。セッションデータは通常、繰り返し訪問のためにユーザーを識別するためにcookieトークンに依存します。同じ目的）。データには通常、スライドした有効期限（ユーザーがアクセスするたびに更新される）があり、データはインプロセス（Webサーバーがクラッシュまたは再起動するとデータが失われる）でインプロセスで保存されます。状態サーバーまたはデータベース。これは、Webファーム（特定のWebサイトに複数のサーバー）を使用する場合にも必要です。

セッションデータはアプリケーション（サーバー側）によって完全に制御されているため、機密性が高く安全なものには最適な場所です。

サーバーサイドデータの明らかな不利な点はスケーラビリティです - セッションの間はサーバーリソースが各ユーザーに必要で、クライアントサイドに必要なデータはリクエストごとに送信される必要があります。ユーザが別のサイトに移動したりブラウザを閉じたりしたかどうかをサーバが知ることができないため、セッションデータは一定時間後に期限切れになり、すべてのサーバリソースが放棄されたセッションによって占有されるのを防ぎます。したがって、セッションデータを使用するときは、特に長いフォームを含むページでは、データが期限切れになって失われる可能性があることに注意する必要があります。また、ユーザーが自分のクッキーを削除したり、ブラウザやデバイスを切り替えたりした場合にも失われます。

Webフレームワークや開発者の中には、セッションの有効期限を避けるために、フォームのあるページから別のページにデータを保持するために隠しHTML入力を使用するものがあります。

localStorage、sessionStorage、およびcookieはすべて「same-Origin」規則に従います。つまり、ブラウザは、情報を最初に設定するドメイン以外のデータへのアクセスを禁止する必要があります。

クライアントストレージ技術の詳細については、 Dive Into Html 5 を参照してください。

635
pwdst

  1. LocalStorage

    長所 ：

    1. Webストレージは単純にCookieの改善と見なすことができ、はるかに大きなストレージ容量を提供します。 Mozillaのソースコードを見ると、 5120KB （ 5MB と等しい 250万文字 ）がドメイン全体のデフォルトのストレージサイズであることがわかります。 。これにより、通常の4KB Cookieよりもかなり多くの作業スペースを確保できます。
    2. HTTPリクエスト（HTML、画像、JavaScript、CSSなど）ごとにデータがサーバーに送信されるわけではないため、クライアントとサーバー間のトラフィック量が減少します。
    3. LocalStorageに格納されているデータは、明示的に削除されるまで保持されます。加えられた変更は保存され、現在および将来のそのサイトへのすべてのアクセスで利用可能になります。

    短所 ：

    1. 同じオリジンポリシー で動作します。そのため、保存されたデータは同じOrigin上でのみ利用可能になります。

  2. クッキー

    長所：

    1. 他の人と比べて、何も知らない。

    短所：

    1. 4Kの制限は、名前、値、有効期限などを含むCookie全体に対するものです。ほとんどのブラウザをサポートするには、名前を4000バイト以下に、Cookie全体のサイズを4093バイト以下にしてください。

    2. データはHTTPリクエスト（HTML、画像、JavaScript、CSSなど）ごとにサーバーに送り返されるため、クライアントとサーバー間のトラフィック量が増加します。

      通常、以下が許可されています。

      • 300 合計でCookie
      • 4096バイト cookieごと
      • 20クッキー ドメインごと
      • 81920バイト 1ドメインあたり（最大サイズ4096のクッキーが20個ある場合は81920バイト）。

  3. sessionStorage

    長所：

    1. これはlocalStorageに似ています。
    2. データは永続的ではありません。つまり、データはウィンドウ（またはChromeやFirefoxなどのブラウザのタブ）ごとにしか利用できません。データはページセッション中にのみ利用可能です。加えられた変更は保存され、現在のページ、および同じウィンドウでの将来のそのサイトへのアクセスに使用できます。ウィンドウが閉じられると、ストレージは削除されます。

    短所：

    1. データは、それが設定されたウィンドウ/タブ内でのみ利用可能です。
    2. localStorageと同様に、ttは same-Originポリシー で動作します。そのため、保存されたデータは同じOrigin上でのみ利用可能になります。
47
softvar

さて、LocalStorageはあなたのブラウザ用のローカルストレージと呼ばれていますが、10MBまで保存することができますが、SessionStorageと同じことができます。セッションベースで、ブラウザを閉じた後に削除されます。また、最大{5MB}のようにLocalStorageよりも節約できますが、Cookiesはブラウザに保存される非常に小さなデータです。 4KBサーバーとブラウザの両方からアクセスできます...

一目で違いを示すために私も下の画像を作成しました：

LocalStorage, SessionStorage and Cookies

27
Alireza

DocumentがDOMオブジェクトを保持するwindowオブジェクトのプロパティの一つであるように、これらはJavaScriptの 'window'オブジェクトのプロパティです。

Session Storageプロパティは、ページセッションの間、つまりブラウザが開いている限り（ページのリロードと復元を含む）、利用可能なOriginごとに別々の記憶領域を維持します。

ローカルストレージも同じことをしますが、ブラウザを閉じて再び開いても持続します。

次のように格納データを設定および取得できます。

sessionStorage.setItem('key', 'value');

var data = sessionStorage.getItem('key');

LocalStorageも同様です。

22
Prashant_M

ローカルストレージ： 有効期限なしでユーザー情報データを保存し続けます。ユーザーがブラウザウィンドウを閉じても削除されません。

ローカルストレージで5-10メガバイトのオフラインデータを保存することができます。

//Set the value in a local storage object
localStorage.setItem('name', myName);

//Get the value from storage object
localStorage.getItem('name');

//Delete the value from local storage object
localStorage.removeItem(name);//Delete specifice obeject from local storege
localStorage.clear();//Delete all from local storege

セッションの保存： ブラウザウィンドウがWebユーザーによって閉じられたときにすべてのウィンドウが削除されること以外はローカルの保存日と同じです。

セッションストレージには最大5MBのデータを保存できます

//set the value to a object in session storege
sessionStorage.myNameInSession = "Krishna";

Session ：セッションはサーバーに格納されているグローバル変数です。各セッションには、格納されている値を取得するために使用される一意のIDが割り当てられています。

Cookie ：Cookieは、小さなテキストファイルに名前と値のペアとしてコンピュータに保存されているデータです。 Cookieが設定されると、それ以降のすべてのページリクエストはCookieの名前と値を返します。

2
Srikrushna Pal

Web Storage APIは、Cookieを使用するよりもはるかに直感的な方法で、ブラウザが安全にキーと値のペアを保存できるメカニズムを提供します。 Web Storage APIWindowオブジェクトを、2つの新しいプロパティーWindow.sessionStorageおよびWindow.localStorageで拡張します。 - これらのいずれかを呼び出すと、Storageオブジェクトのインスタンスが作成され、それを介してデータ項目を設定、取得、削除できます。各Origin（ドメイン）のsessionStorageとlocalStorageには、異なるStorageオブジェクトが使用されています。

ストレージオブジェクトは、オブジェクトと同様に単純なkey-valueストアです。しかし、それらはページロードを通じてそのまま残ります。

localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');

キーと値は常にstringsです。任意の型 convert it to String を格納してから格納します。常に Storage interface メソッドを使用することをお勧めします。

var testObject = { 'one': 1, 'two': 2, 'three': 3 };
// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
console.log('Converting String to Object: ', JSON.parse(retrievedObject));

Web Storage内の2つのメカニズムは次のとおりです。

  • sessionStorage指定された各Originに対して別々の記憶領域を維持します。同起源ポリシー これは、ページセッション中（ページの再読み込みや復元を含む、ブラウザが開いている限り）有効です。
  • localStorageでも同じことができますが、ブラウザを閉じて再び開いても持続します。

ストレージ « ローカルストレージ セッションストレージはデータをメモリにのみ書き込みます。セッションストレージに書き込まれたデータはすべて、アプリの終了時に消去されます。

利用可能な最大ストレージはブラウザごとに異なります しかし、ほとんどのブラウザは少なくともw3cが推奨する最大ストレージ制限 5MB を実装しています。

+----------------+--------+---------+-----------+--------+
|                | Chrome | Firefox | Safari    |  IE    |
+----------------+--------+---------+-----------+--------+
| LocalStorage   | 10MB   | 10MB    | 5MB       | 10MB   |
+----------------+--------+---------+-----------+--------+
| SessionStorage | 10MB   | 10MB    | Unlimited | 10MB   |
+----------------+--------+---------+-----------+--------+

LocalStorageのセキュリティとクォータ超過エラーを常にキャッチ

StorageEvent «ストレージイベントは、ストレージ領域が変更されたときにドキュメントのWindowオブジェクトで発生します。ユーザーエージェントがDocumentの保存通知を送信する場合、ユーザーエージェントはStorageEventを使用して、DocumentオブジェクトのWindowオブジェクトでstorageという名前のイベントを発生させるタスクをキューに入れる必要があります。

注：実際の例については、 Web Storage Demo を参照してください。 ソースコードをチェックアウト

Dom/Windowのストレージイベントを監視して、ストレージの変更をキャッチします。 いじる 。

Cookie （Web Cookie、ブラウザCookie）Cookieは、名前と値のペアとして小さなテキストファイルにコンピュータに保存されているデータです。

を使ったJavaScriptアクセス Document.cookie

Document.cookieプロパティを使用してJavaScriptを介して新しいCookieを作成することもできます。HttpOnlyフラグが設定されていない場合は、JavaScriptから既存のCookieにもアクセスできます。

document.cookie = "yummy_cookie=choco"; 
document.cookie = "tasty_cookie=strawberry"; 
console.log(document.cookie); 
// logs "yummy_cookie=choco; tasty_cookie=strawberry"

安全でHttpOnlyなクッキー HTTPステート管理メカニズム

CookieはWebアプリケーションでユーザーとその認証セッションを識別するためによく使用されます。

HTTPリクエストを受信すると、サーバーは Set-Cookie ヘッダーをレスポンスと共に送信できます。通常、クッキーはブラウザによって保存され、その後クッキーはHTTP HTTPヘッダー内の同じサーバーに対して行われた要求と共に送信されます。

Set-Cookie: <cookie-name>=<cookie-value> 
Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>

セッションクッキー クライアントがシャットダウンされると削除されます。 ExpiresやMax-Ageディレクティブは指定されていません。

Set-Cookie: sessionid=38afes7a8; HttpOnly; Path=/

パーマネントクッキー 特定の日に有効期限が切れる（有効期限）、または特定の期間が過ぎると有効期限が切れる（最大有効期間）。

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly

Cookie HTTP要求ヘッダーには、以前にサーバーによってSet-Cookieヘッダーと共に送信されたHTTP HTTP Cookieが格納されています。 HTTPのみのCookieは、クロスサイトスクリプティング（XSS）に対する攻撃を軽減するために、Document.cookieプロパティ、XMLHttpRequestおよびRequest APIを介してJavaScriptを介してアクセスすることはできません。

クッキーは主に3つの目的で使用されます。

  • セッション管理 «ログイン、ショッピングカート、ゲームのスコア、その他サーバーが記憶すべきもの
  • パーソナライズ «ユーザー設定、テーマ、その他の設定
  • トラッキング （ユーザーの行動の記録と分析）«クッキーには関連するドメインがあります。このドメインが現在表示しているページのドメインと同じである場合、そのCookieはファーストパーティCookieであると言われます。ドメインが異なる場合、それはサードパーティのクッキーであると言われています。ファーストパーティのCookieはそれらを設定したサーバーにのみ送信されますが、Webページには他のドメインのサーバー（広告バナーなど）に保存されている画像やその他のコンポーネントが含まれる場合があります。これらのサードパーティコンポーネントを通じて送信されるCookieは、サードパーティCookieと呼ばれ、主にWeb上での宣伝や追跡に使用されます。

クッキーは、「ユーザーに関する情報をどのように記憶するか」という問題を解決するために考案されました。

  • ユーザーがWebページにアクセスすると、その名前はCookieに保存されます。
  • ユーザーが次にそのページにアクセスしたときに、そのページに属するCookieが要求に追加されます。このようにして、サーバーはユーザーに関する情報を「記憶」するために必要なデータを取得します。

GitHubGist 例

まとめとして、

  • localStorageは別のタブやウィンドウにまたがって、そしてたとえブラウザを閉じたとしても、それに応じてドメインセキュリティポリシーとクォータ制限についてのユーザーの選択によって持続します。
  • sessionStorageオブジェクトは、タブ（トップレベルのブラウジングコンテキスト）を閉じても存続しません。別のタブやウィンドウを介してサーフィンした場合は存在しないからです。
  • Web Storage（セッション、ローカル）を使用すると、大量のキーと値のペアと大量のテキストを保存できます。これはcookieを使っては不可能です。
  • 敏感な行動のために使用されるクッキーは短い寿命しかないはずです。
  • Cookieは主にWeb上での宣伝や追跡に使用されます。たとえば、 Googleが使用するクッキーの種類 を参照してください。
  • Cookieはリクエストごとに送信されるため、パフォーマンスが低下する可能性があります（特にモバイルデータ接続の場合）。クライアントストレージ用の最新のAPIは、WebストレージAPI（localStorageおよびsessionStorage）とIndexedDBです。
2
Yash

ローカルストレージ ：

  • Webストレージは単純にCookieの改善と見なすことができ、はるかに大きなストレージ容量を提供します。利用可能なサイズは5MBで、通常の4KBのクッキーよりもかなり多くの作業スペースがあります。

  • HTTPリクエスト（HTML、画像、JavaScript、CSSなど）ごとにデータがサーバーに送信されるわけではないため、クライアントとサーバー間のトラフィック量が減少します。

  • LocalStorageに格納されているデータは、明示的に削除されるまで保持されます。加えられた変更は保存され、現在および将来のそのサイトへのすべてのアクセスで利用可能になります。

  • 同一オリジンポリシーで動作します。そのため、保存されたデータは同じOrigin上でのみ利用可能になります。

クッキー：

  • クッキーごとに有効期限を設定できます

  • 4Kの制限は、名前、値、有効期限などを含むCookie全体に対するものです。ほとんどのブラウザをサポートするには、名前を4000バイト以下に、Cookie全体のサイズを4093バイト以下にしてください。

  • データはHTTPリクエスト（HTML、画像、JavaScript、CSSなど）ごとにサーバーに送り返されるため、クライアントとサーバー間のトラフィック量が増加します。

sessionStorage：

  • LocalStorageに似ています。

  • 変更はウィンドウ（またはChromeやFirefoxのようなブラウザのタブ）ごとにしか利用できません。加えられた変更は保存され、現在のページ、および同じウィンドウでの将来のそのサイトへのアクセスに使用できます。ウィンドウが閉じられると、ストレージは削除されます。データはそれが設定されているウィンドウ/タブ内でのみ利用可能です。

  • データは永続的ではありません。つまり、ウィンドウ/タブが閉じられると失われます。 localStorageと同様に、同じOriginポリシーで動作します。そのため、保存されたデータは同じOrigin上でのみ利用可能になります。

0
Developer