Web Storage APIは、ブラウザがCookieを使用するよりもはるかに直感的な方法で、キーと値のペアを安全に保存できるメカニズムを提供します。ウェブストレージAPIを拡張しWindow2つの新しいプロパティを持つオブジェクトを- Window.sessionStorageとWindow.localStorage。—これらの1つを呼び出すと、Storageオブジェクトのインスタンスが作成され、データオブジェクトを設定、取得、および削除できます。sessionStorageとlocalStorage各オリジン（ドメイン）には異なるストレージオブジェクトが使用されます。
ストレージオブジェクトは、オブジェクトに似た単純なKey-Valueストアですが、ページの読み込み中はそのまま残ります。
localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');
キーと値は常に文字列です。任意のタイプ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つのメカニズムは次のとおりです。
ストレージ « ローカルストレージはデータをディスクに書き込みますが、セッションストレージはデータをメモリのみに書き込みます。アプリが終了すると、セッションストレージに書き込まれたデータはすべて消去されます。
使用可能な最大ストレージは、ブラウザごとに異なっているが、ほとんどのブラウザでは、少なくとも、W3Cは、最大容量の制限推奨実装した5メガバイトを。
+----------------+--------+---------+-----------+--------+
| | Chrome | Firefox | Safari | IE |
+----------------+--------+---------+-----------+--------+
| LocalStorage | 10MB | 10MB | 5MB | 10MB |
+----------------+--------+---------+-----------+--------+
| SessionStorage | 10MB | 10MB | Unlimited | 10MB |
+----------------+--------+---------+-----------+--------+
LocalStorageセキュリティとクォータ超過エラーを常にキャッチする
StorageEvent «ストレージ領域が変更されると、ドキュメントのWindowオブジェクトでstorageイベントが発生します。ユーザーエージェントがドキュメントのストレージ通知を送信する場合、ユーザーエージェントは、StorageEventを使用して、DocumentオブジェクトのWindowオブジェクトでstorageという名前のイベントを発生させるタスクをキューに入れる必要があります。
注：実際の例については、Web Storage Demoを参照してください。ソースコードをチェックしてください
dom / Windowのストレージイベントをリッスンして、ストレージの変更をキャッチします。バイオリン。
Cookie（Web Cookie、ブラウザCookie）Cookieは、コンピュータ上の名前と値のペアとして小さなテキストファイルに保存されたデータです。
Document.cookieを使用したJavaScriptアクセス
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 Cookie HTTP状態管理メカニズム
Cookieは、ユーザーとその認証済みセッションを識別するためにWebアプリケーションでよく使用されます
HTTP要求を受信すると、サーバーは応答とともにSet-Cookieヘッダーを送信できます。Cookieは通常ブラウザによって保存され、CookieはCookie HTTPヘッダー内の同じサーバーに対して行われたリクエストとともに送信されます。
Set-Cookie: <cookie-name>=<cookie-value>
Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>
クライアントがシャットダウンされると、セッションCookieは削除されます。ExpiresやMax-Ageディレクティブは指定していません。
Set-Cookie: sessionid=38afes7a8; HttpOnly; Path=/
永続的なCookieは、特定の日付（Expires）または特定の期間（Max-Age）後に期限切れになります。
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly
Cookie HTTPリクエストヘッダーには、以前にSet-Cookieヘッダーを使用してサーバーから送信された、保存済みのHTTP Cookieが含まれています。クロスサイトスクリプティング（XSS）に対する攻撃を緩和するために、Document.cookieプロパティ、XMLHttpRequestおよびRequest APIを介してJavaScript経由でHTTPのみのCookieにアクセスすることはできません。
Cookieは主に次の3つの目的で使用されます。
- セッション管理 «ログイン、ショッピングカート、ゲームのスコア、その他サーバーが覚えておくべきこと
- パーソナライゼーション «ユーザー設定、テーマ、その他の設定
- 追跡（ユーザーの行動の記録と分析）«Cookieにはドメインが関連付けられています。このドメインが表示しているページのドメインと同じである場合、CookieはファーストパーティCookieと呼ばれます。ドメインが異なる場合、それはサードパーティのCookieと呼ばれます。ファーストパーティCookieはそれらを設定しているサーバーにのみ送信されますが、Webページには他のドメインのサーバーに保存されている画像やその他のコンポーネント（広告バナーなど）が含まれている場合があります。これらのサードパーティコンポーネントを介して送信されるCookieはサードパーティCookieと呼ばれ、主にWeb全体での広告と追跡に使用されます。
Cookieは、「ユーザーに関する情報をどのように記憶するか」という問題を解決するために発明されました。
- ユーザーがWebページにアクセスすると、その名前がCookieに保存されます。
- 次にユーザーがページにアクセスすると、そのページに属するCookieがリクエストに追加されます。このようにして、サーバーはユーザーに関する情報を「記憶」するために必要なデータを取得します。
GitHubGistの例
まとめとして、
- localStorageは、さまざまなタブまたはウィンドウにわたって保持されます。また、ブラウザーを閉じた場合でも、それに応じて、ドメインのセキュリティポリシーと割り当て制限に関するユーザーの選択に従います。
- sessionStorageオブジェクトは、別のタブまたはウィンドウを介してサーフィンする場合は存在しないため、タブ（トップレベルのブラウジングコンテキスト）を閉じると永続化しません。
- Webストレージ（セッション、ローカル）を使用すると、大量のキーと値のペアと大量のテキストを保存できます。これは、Cookieを使用して実行するのは不可能です。
- デリケートなアクションに使用されるCookieは、有効期間が短い必要があります。
- 主にWeb全体での広告と追跡に使用されるCookie。たとえば、Googleで使用されるCookieの種類をご覧ください。
- Cookieはリクエストごとに送信されるため、パフォーマンスが低下する可能性があります（特にモバイルデータ接続の場合）。クライアントストレージ用の最新のAPIは、WebストレージAPI（localStorageおよびsessionStorage）とIndexedDBです。
