KnowHub

ストレージインターフェース

概要

ストレージ インターフェイスは、ブラウザにデータを保存するためにスクリプトによって使用されます。このインターフェースは、window.sessionStorage と window.localStorage という 2 つのオブジェクトによってデプロイされます。

sessionStorage によって保存されたデータは、ブラウザのセッションに使用されます。セッションが終了すると (通常はウィンドウが閉じられます)、localStorage によって保存されたデータは、次回アクセスするときに消去されます。 Web サイトにアクセスすると、Web ページで以前に保存したデータを直接読み取ることができます。保存期間が異なることを除けば、2 つのオブジェクトはその他の点では同一です。

保存されたデータは「キーと値のペア」の形式で存在します。つまり、データの各項目にはキー名と対応する値があります。すべてのデータはテキスト形式で保存されます。

このインターフェイスは Cookie の拡張バージョンによく似ており、より大きなストレージ スペースを使用できます。現在、ドメインごとのストレージ制限はブラウザによって異なり、Chrome では 2.5 MB、Firefox と Opera では 5 MB、IE では 10 MB です。このうち、Firefox のストレージ容量は第 1 レベルのドメイン名によって決まりますが、他のブラウザにはこの制限がありません。つまり、Firefox では、「a.example.com」 と 「b.example.com」 が 5MB の記憶域を共有します。また、Cookie と同様に、同一ドメインの制限が適用されます。 Web ページに保存されているデータは、同じドメイン内の Web ページからのみ読み取ることができます。ドメインを越えて操作すると、エラーが報告されます。

プロパティとメソッド

ストレージ インターフェイスにはプロパティが 1 つだけあります。

  • Storage.length: 保存されているデータの数を返します。
window.localStorage.setItem('foo', 'a');
window.localStorage.setItem('bar', 'b');
window.localStorage.setItem('baz', 'c');

window.localStorage.length // 3

このインターフェイスには 5 つのメソッドが用意されています。

Storage.setItem()

データの保存には Storage.setItem() メソッドが使用されます。 2 つのパラメータを受け入れます。1 つ目はキー名、2 つ目は保存されたデータです。キー名がすでに存在する場合、このメソッドは既存のキー値を更新します。このメソッドには戻り値がありません。

window.sessionStorage.setItem('キー', '値');
window.localStorage.setItem('キー', '値');

Storage.setItem() のパラメータは両方とも文字列であることに注意してください。文字列でない場合は、自動的に文字列に変換されてブラウザに保存されます。

window.sessionStorage.setItem(3, { foo: 1 });
window.sessionStorage.getItem('3') // "[オブジェクト オブジェクト]"

上記のコードでは、setItem メソッドのパラメータは両方とも文字列ではありませんが、格納される値はすべて文字列です。

ストレージスペースがいっぱいの場合、このメソッドはエラーをスローします。

このメソッドを使用して記述する必要はなく、直接代入することも可能です。

//以下の3つの書き方は同等です
window.localStorage.foo = '123';
window.localStorage['foo'] = '123';
window.localStorage.setItem('foo', '123');

Storage.getItem()

データの読み取りには Storage.getItem() メソッドが使用されます。パラメータはキー名という 1 つだけです。キー名が存在しない場合、このメソッドは「null」を返します。

window.sessionStorage.getItem('key')
window.localStorage.getItem('key')

キー名は文字列である必要があります。それ以外の場合は、自動的に文字列に変換されます。

Storage.removeItem()

Storage.removeItem() メソッドは、特定のキー名に対応するキー値をクリアするために使用されます。キー名をパラメータとして受け取ります。キー名が存在しない場合、メソッドは何も行いません。

sessionStorage.removeItem('key');
localStorage.removeItem('key');

Storage.clear()

Storage.clear() メソッドは、保存されたデータをすべてクリアするために使用されます。このメソッドの戻り値は「未定義」です。

window.sessionStorage.clear()
window.localStorage.clear()

Storage.key()

Storage.key() メソッドは、パラメータとして整数 (ゼロから始まる) を受け取り、その場所に対応するキー名を返します。

window.sessionStorage.setItem('キー', '値');
window.sessionStorage.key(0) // "キー"

Storage.length プロパティを Storage.key() メソッドと組み合わせて使用​​すると、すべてのキーを反復処理できます。

for (var i = 0; i < window.localStorage.length; i++) {
  console.log(localStorage.key(i));
}

ストレージ イベント

ストレージ インターフェイスに保存されているデータが変更されると、ストレージ イベントがトリガーされます。このイベントのリスニング機能を指定できます。

window.addEventListener('storage', onStorageChange);

リスニング関数は、「イベント」インスタンス オブジェクトをパラメータとして受け取ります。このインスタンス オブジェクトは StorageEvent インターフェイスを継承し、いくつかの固有のプロパティを持ち、それらはすべて読み取り専用です。

  • StorageEvent.key: 変更されたキー名を示す文字列。ストレージ イベントが clear() メソッドによって引き起こされた場合、このプロパティは null を返します。
  • StorageEvent.newValue: 新しいキー値を表す文字列。 clear() メソッドまたはキーと値のペアの削除によってストレージ イベントが発生した場合、このプロパティは null を返します。
  • StorageEvent.oldValue: 古いキー値を表す文字列。キーと値のペアが新しい場合、このプロパティは「null」を返します。
  • StorageEvent.storageArea: オブジェクト。キーと値のペアが配置されているオブジェクト全体を返します。つまり、現在のドメイン名に保存されているすべてのキーと値のペアをこの属性から取得できます。
  • StorageEvent.url: ストレージ イベントを最初にトリガーした Web ページの URL を表す文字列。

以下は「StorageEvent.key」プロパティの例です。

関数 onStorageChange(e) {
  console.log(e.key);
}

window.addEventListener('storage', onStorageChange);

このイベントの非常に特別な特徴は、データの変更を引き起こす現在のページではなく、同じドメイン名の他のウィンドウでトリガーされることです。つまり、ブラウザが 1 つのウィンドウしか開いていない場合、このイベントは観察されない可能性があります。たとえば、複数のウィンドウが同時に開かれている場合、そのうちの 1 つのウィンドウで保存されたデータが変更されると、リスニング関数の実行は他のウィンドウでのみ確認できます。このメカニズムを通じて、複数のウィンドウ間の通信を実現できます。

参考リンク

作者: wangdoc

アドレス: https://wangdoc.com/

ライセンス: クリエイティブ・コモンズ 3.0

前の章次の章