Web Storage API：ローカルストレージとセッションストレージ

Web Storage APIは、ブラウザにデータを保存する方法を提供します。これは、非常に重要な2つのストレージメカニズムを定義します。セッションストレージとローカルストレージ、Webプラットフォームで利用可能な一連のストレージオプションの一部です。

前書き

Web Storage APIは、非常に重要な2つのストレージメカニズムを定義しています。セッションストレージそしてローカルストレージ。

これらは、Webプラットフォームで利用可能な一連のストレージオプションの一部であり、次のものが含まれます。

アプリケーションキャッシュは非推奨であり、Web SQLはFirefox、Edge、およびIEに実装されていません。

セッションストレージとローカルストレージはどちらも、データ用のプライベートエリアを提供します。保存したデータに他のウェブサイトからアクセスすることはできません。

セッションストレージは、ページセッションの間、そこに保存されているデータを維持します。複数のウィンドウまたはタブが同じサイトにアクセスする場合、それらには2つの異なるSessionStorageインスタンスがあります。

タブ/ウィンドウを閉じると、その特定のタブ/ウィンドウのセッションストレージがクリアされます。

セッションストレージは、同じサイトで発生するさまざまなプロセスを個別に処理するシナリオを可能にすることを目的としています。たとえば、すべてのセッションで共有されるCookieでは不可能なことです。

代わりに、ローカルストレージは、ユーザーまたはユーザーによって明示的に削除されるまでデータを保持します。自動的にクリーンアップされることはなく、サイトにアクセスするすべてのセッションで共有されます。

ローカルストレージとセッションストレージはどちらもプロトコル固有：を使用してページにアクセスしたときに保存されるデータhttpページが提供されている場合は利用できませんhttps、およびその逆。

Webストレージにはブラウザでのみアクセスできます。 Cookieのようにサーバーに送信されることはありません。

ストレージにアクセスする方法

ローカルストレージとセッションストレージの両方がで利用可能ですwindowオブジェクトなので、を使用してそれらにアクセスできますsessionStorageそしてlocalStorage。

それらのプロパティとメソッドのセットは、同じオブジェクトを返すため、まったく同じです。ストレージオブジェクト。

ストレージオブジェクトには、単一のプロパティがあります。length、これはそれに保存されているデータ項目の数です。

メソッド

`setItem(key, value)`

setItem()ストレージにアイテムを追加します。文字列をキーとして受け入れ、文字列を値として受け入れます。

localStorage.setItem('username', 'flaviocopes')
localStorage.setItem('id', '123')

文字列以外の値を渡すと、文字列に変換されます。

localStorage.setItem('test', 123) //stored as the '123' string
localStorage.setItem('test', { test: 1 }) //stored as "[object Object]"

`getItem(key)`

getItem()これは、ストレージに使用されたキー文字列を使用して、ストレージから文字列値を取得する方法です。

localStorage.getItem('username') // 'flaviocopes'
localStorage.getItem('id') // '123'

`removeItem(key)`

removeItem()で識別されるアイテムを削除しますkeyストレージから、何も返さない（undefined値）：

localStorage.removeItem('id')

`key(n)`

保存するすべてのアイテムにはインデックス番号があります。

番号が連続しているように見える場合がありますので、初めて使用するときsetItem()、そのアイテムはを使用して参照できますkey(0)、次のkey(1)などですが、そうではありません。 MDNは、「キーの順序はユーザーエージェントによって定義されるため、それに依存しないでください」と述べています。

ストレージアイテムを指していない番号を参照すると、次のようになります。null。

`clear()`

clear()操作しているストレージオブジェクトからすべてを削除します。

localStorage.setItem('a', 'a')
localStorage.setItem('b', 'b')
localStorage.length //2
localStorage.clear()
localStorage.length //0

ストレージサイズの制限

Storage APIを使用すると、Cookieを使用する場合よりもはるかに多くのデータを保存できます。

Webで使用可能なストレージの量は、ストレージの種類（ローカルまたはセッション）、ブラウザー、およびデバイスの種類によって異なる場合があります。 A研究html5rocks.comは、これらの制限を指摘しています。

デスクトップ

Chrome、IE、Firefox：10MB
Safari：ローカルストレージ用に5MB、無制限のセッションストレージ

モバイル

Chrome、Firefox：10MB
iOS SafariおよびWebView：ローカルストレージ用に5MB、5MBのiOS6およびiOS7でない限り、セッションストレージは無制限
Androidブラウザ：2MBのローカルストレージ、無制限のセッションストレージ

割り当てを超えています

特に大量のデータを保存する場合は、クォータエラーを処理する必要があります。あなたはtry / catchでそうすることができます：

try {
  localStorage.setItem('key', 'value')
} catch (domException) {
  if (
    ['QuotaExceededError', 'NS_ERROR_DOM_QUOTA_REACHED'].includes(
      domException.name
    )
  ) {
    // handle quota limit exceeded error
  }
}

開発者ツール

主要なブラウザのDevToolsはすべて、ローカルストレージとセッションストレージに保存されているデータを検査および操作するための優れたインターフェイスを提供します。

クロム

Chrome DevTools local storage

Firefox

Firefox DevTools local storage

サファリ

Safari DevTools local storage

私の無料ダウンロードJavaScriptビギナーズハンドブック