HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM の storage イベントとは?基本構文とサンプルコードを解説

HTML DOM の storage イベントは、ウィンドウのストレージ領域(localStorage や sessionStorage)に変更が加えられたときに発生します。このイベントには重要な特徴があり、同じウィンドウ内での変更では発火せず、別のウィンドウやタブがそのストレージ領域を変更した場合にのみトリガーされるという点です。これにより、複数のタブ間でデータの同期を取る処理などに活用できます。

storage イベントの主なプロパティ

イベントオブジェクトからは、以下のような情報を取得できます。

  • event.key: 変更されたキーの名前
  • event.oldValue: 変更前の値
  • event.newValue: 変更後の値
  • event.url: 変更が行われたページの URL
  • event.storageArea: 変更対象となった Storage オブジェクト

構文

storage イベントをリッスンするための基本的な構文は以下のとおりです。

window.addEventListener("storage", SCRIPT);

サンプルコード

それでは、storage イベントの具体的な使用例を見てみましょう。以下の例では、ボタンをクリックすると新しいウィンドウが開き、そこで localStorage に訪問回数(VISITS)が保存されます。ストレージに変更があったタイミングで、元のページ側の storage イベントが発火し、メッセージが表示されます。

<!DOCTYPE html>
<html>
<body>
<h1>Storage Event Example</h1>
<p>下のボタンをクリックして localStorage に VISITS 項目を作成します</p>
<button onclick="CreateVisits()">CREATE</button>
<p id="Sample"></p>
<script>
    var y = 1;
    window.addEventListener("storage", DisplayChange);
    function DisplayChange(event) {
        document.getElementById("Sample").innerHTML = "訪問回数が更新されました";
    }
    function CreateVisits() {
        y++;
        var x = window.open("", "WINDOW_1", "width=350,height=350");
        x.localStorage.setItem("VISITS", y);
        setTimeout(function () { x.close(); }, 4000);
    }
</script>
</body>
</html>

実行結果

上記のコードをブラウザで実行すると、次のような画面が表示されます。

HTML DOM の storage イベントとは?基本構文とサンプルコードを解説

CREATE ボタンをクリックすると、新しいウィンドウが開き、localStorage への書き込みが行われます。

HTML DOM の storage イベントとは?基本構文とサンプルコードを解説

さらに、開発者ツールのコンソールタブで localStorage の内容を確認すると、VISITS の値が保存されていることがわかります。

HTML DOM の storage イベントとは?基本構文とサンプルコードを解説

まとめ

storage イベントは、別ウィンドウ・別タブによるストレージへの変更を検知できる便利な仕組みです。タブ間の状態同期やリアルタイムなデータ反映を実装したい場合にぜひ活用してみてください。

  1. HTML DOM TouchEventのtouchesプロパティとは？使い方とサンプルコードを解説

    TouchEvent touchesプロパティとはHTML DOMのTouchEventにおけるtouchesプロパティは、タッチ面（タッチスクリーンなど）上で発生したすべての接触ポイント（コンタクトポイント）のリストに対応するTouchListオブジェクトを返します。注意：指定されたノード、またはその子ノード上でタッチが発生した場合、その後に続くタッチ操作は、同じノード上で発生していなくてもカウント対象になります。構文TouchListオブジェクトを取得するための構文は以下の通りです。event.touches補足：本記事のタッチイベントのサンプルコードは、モバイル端末やタッチ操作対応デバイ

  2. HTML DOM Event typeプロパティとは？イベントの種類を取得する方法を実例付きで解説

    HTML DOM Event typeプロパティとはHTML DOMのEvent typeプロパティは、発生したイベントの種類に対応する文字列を返すプロパティです。「click」「keypress」「load」「touchend」など、さまざまなイベントタイプを取得できます。構文イベントの種類を文字列として取得するには、以下のように記述します。event.typeそれでは、Event typeプロパティの具体的な使用例を見ていきましょう。使用例以下のサンプルでは、赤い円形の要素に対して「クリック」または「タッチ」が行われた際に、event.typeでイベントの種類を判定しています。イベントの種