web-dev-qa-db-ja.com

localStorage vs sessionStorage vs cookie

ユーザーがログインしている間にデータを保持する必要があるアプリで作業していますが、localStorage、sessionStorage、cookieの違いは何ですか?

ユーザーがページを更新しても、DOMにデータを永続化するために何を使用できるかを尋ねていました:セッションストレージまたはローカルストレージを使用して、誰かが使用のアイデアを思いついた ngCookies はすべてのブラウザで機能するためですが、どちらを使用すればよいですか?

58
Non

localStoragesessionStorageは、両方ともいわゆるWebStoragesであり、HTML5の機能です。

localStorageは、ユーザーが情報を削除しない限り、情報を保存します。

sessionStorageは、セッションが続く限り情報を保存します。通常、ユーザーがタブ/ブラウザを閉じるまで。

cookiesは、古いブラウザでサポートされている単純なcookieであり、通常は上記のWebStoragesを使用するフレームワークのフォールバックです。

対照的に、CookieはWebStorageよりも少ない情報を格納でき、WebStorageの情報はサーバーに転送されません。

EUには、WebサイトがユーザーにCookieの使用について通知することを要求する規制があることに留意してください。これがWebStorageにも当てはまるかどうかわかりません

86
Rouby

sessionStorageオブジェクト: sessionStorageオブジェクトはセッションのデータのみを保存します。つまり、データはブラウザ(またはタブ)が閉じられるまで保存されます。ファイルがローカルで実行されている場合は使用できません。

SessionStorageオブジェクトに保存されたデータは、最初にデータを保存したページからのみアクセスできます。これはあなたの要件を満たしていません

localStorageオブジェクト: localStorageオブジェクトを使用して保存されたデータは、JavaScriptを介して明確に削除されるか、ユーザーがブラウザのキャッシュをクリアするまで保持されます。

LocalStorageオブジェクトに保存されたデータには、最初にデータを保存したドメインからのみアクセスできます。

あなたの場合、クッキーまたはセッションを使用することを検討すると思います。 Cookieには、サーバーごとに4Kのサイズ制限があります。

17
Jackie Dong

他の回答に加えて、WebStorageはサブドメインや親ドメインにアクセスできません。

4
Ali

localStorage:1.データ制限:5 MB 2.すべてのhttp要求に対して送信されるデータ:いいえ

sessionStorage:1.データ制限:5 MB 2.すべてのhttp要求に対して送信されるデータ:いいえ3.ウィンドウまたはタブが閉じられるとデータは消去されます

データが重要でない場合はlocalstorage/sessionStorageを使用し、そうでない場合はcookieを使用します

0

LocalStorage-有効期限なしでデータを保存し、JavaScriptを介してのみクリアされるか、ブラウザキャッシュ/ローカルに保存されたデータをクリアします。ストレージ制限は3つの中で最大です

SessionStorage-sessionStorageオブジェクトはセッションのデータのみを保存します。つまり、データはブラウザ(またはタブ)が閉じられるまで保存されます。データがサーバーに転送されることはありません。ストレージの制限がCookieよりも大きい(少なくとも5MB)。

Cookie-後続のリクエストでサーバーに送り返す必要のあるデータを保存します。有効期限はタイプによって異なり、有効期限はサーバー側またはクライアント側のいずれかから設定できます(通常はサーバー側から)。 Cookieは主にサーバー側の読み取り用であり(クライアント側でも読み取ることができます)、localStorageとsessionStorageはクライアント側でのみ読み取ることができます。サイズは4KB未満でなければなりません。 CookieのhttpOnlyフラグをtrueに設定することにより、Cookieを安全にすることができます。これにより、そのCookieへのクライアント側のアクセスが防止されます。

0
Anush