JavaScript　ストレージの変更を検知する方法

JavaScriptを使って、ブラウザのストレージ（ローカルストレージ、セッションストレージ、Cookie）の変更を監視する方法について説明します。

JavaScriptを使って、ストレージの変更を検知するにはどうすればよいですか？

JavaScriptでストレージの変更を検知する方法には、Storageイベントを利用する方法とsetIntervalを使って定期的にチェックする方法があります。

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

Storageイベントを利用する方法

Storageイベントは、localStorage、sessionStorage、Cookieで値が変更されたときに発生するイベントです。

このイベントを使用することで、ストレージの変更を検知することができます。

Storageイベントを監視するためには、addEventListenerメソッドを使用します。以下は、localStorageのmyKeyというキーの値が変更されたときに、コンソールにログを出力する例です。

window.addEventListener('storage', function(e) {
  if(e.key === 'myKey') {
    console.log('myKeyの値が変更されました:', e.newValue);
  }
});

このように、addEventListenerメソッドによってStorageイベントを監視し、変更された値を取得することができます。

setIntervalを使って定期的にチェックする方法

Storageイベントが発生しないブラウザがあるため、setIntervalを使用して定期的にストレージの値をチェックする方法があります。

この方法では、事前に保存しておいた値と現在の値を比較し、変更があった場合に処理を実行します。

以下は、localStorageのmyKeyというキーの値が変更されたときに、コンソールにログを出力する例です。

let myKey = localStorage.getItem('myKey');
setInterval(function() {
  if(localStorage.getItem('myKey') !== myKey) {
    console.log('myKeyの値が変更されました:', localStorage.getItem('myKey'));
    myKey = localStorage.getItem('myKey');
  }
}, 1000);

このように、setIntervalメソッドによって定期的にストレージの値をチェックし、変更された値を取得することができます。

サンプルプログラムを使った解説

以下のプログラムは、ストレージ変更を検知するための2つの方法、StorageイベントとsetIntervalを使って実装されたものです。

// Storageイベントを利用する場合
window.addEventListener('storage', function(e) {
  if(e.key === 'myKey') {
    console.log('myKeyの値が変更されました:', e.newValue);
  }
});

// setIntervalを使って定期的にチェックする場合
let myKey = localStorage.getItem('myKey');
setInterval(function() {
  if(localStorage.getItem('myKey') !== myKey) {
    console.log('myKeyの値が変更されました:', localStorage.getItem('myKey'));
    myKey = localStorage.getItem('myKey');
  }
}, 1000);

　1つめの部分は、Storageイベントを利用してストレージの変更を監視する方法を示しています。addEventListenerメソッドを使用して、windowオブジェクトに対してstorageイベントを登録しています。このイベントが発生すると、引数に渡された関数が実行され、変更されたストレージのキーと値が取得できます。この例では、myKeyが変更されたときにコンソールにログを出力するようになっています。

　2つめの部分は、setIntervalを使用して定期的にストレージの値をチェックする方法を示しています。まず、localStorageからmyKeyの初期値を取得しています。そして、1秒ごとにlocalStorageからmyKeyの値を取得して、それが前回の値と異なる場合には、変更があったということなので、コンソールにログを出力します。また、myKeyの値を現在の値に更新しています。

このプログラムを実行すると、ストレージの変更を監視していることがわかります。ストレージの値が変更されたときには、どちらの方法でも、コンソールにログが出力されます。ただし、Storageイベントはすべてのブラウザでサポートされているわけではないため、setIntervalを併用することで、よりブラウザの互換性を高めることができます。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

まとめ

ブラウザのストレージ（ローカルストレージ、セッションストレージ、Cookie）の変更を監視する方法について解説しました。

JavaScriptでストレージの変更を検知する方法は、以下の2つがある。
Storageイベントを利用する方法
- localStorage、sessionStorage、Cookieで値が変更されたときに発生するイベント
- addEventListenerメソッドを使用して監視する
setIntervalを使って定期的にチェックする方法
- localStorageの値を定期的にチェックする
- 前回の値と比較して変更があった場合に処理を実行する
同じオリジン内でのみ有効であることに注意が必要である。