クライアントサイドストレージ – Web Storageについて(その3)

前々回の投稿で少しだけ登場しましたが、

localStorageにキーと値を登録(更新)する時に

localStorage.test1 = "テストA";

と書くケースと、違うケースとして

localStorage.setItem("test1", "テストA");

と書く方法があると紹介しました。

ここでは、少し深く掘り下げて後者の書き方を試してようと思います。

具体的に後者の書き方のことを Strage API と呼び、
Strage API を使って、データの登録、呼び出し、削除等をプロパティを使って行うことができます。

Strage APIについて

Strage APIを使ったデータの操作についてまとめます。

データの登録、更新

setItem()メソッドを使います。

localStorage.setItem("test1", "テストA");

データの取得

getItem()メソッドを使います。

localStorage.getItem("test1");

上記の場合、「テストA」という文字列が取得できます。

データの削除

remoteItem()メソッドを使います。

localStorage.remoteItem("test1");

ローカルストレージからキー「test1」のデータを削除します。
キーと値の両方を削除します。

データの削除(ストレージからの全削除)

clear()メソッドを使います。

localStorage.clear();

全ローカルストレージを削除します。

Storage イベントについて

Storage APIを使用してデータの登録、更新、削除、等を行ったタイミングで、
windowオブジェクトでストレージイベントが発生します。

ここでポイントとなるのがwindowオブジェクトに対して発生するという点です。
具体的には、同じURLの画面をタブで2つ開いている場合や、画面内にフレームが存在し、
そのフレームで同一出身ポリシーの画面を開いている場合。ということが言えます。

また、登録するデータが既存と同じデータの場合は、このイベントは発生しません。
データが異なる場合にイベントが発生します。

Storage イベントを使う場合、addEventListener()を使用する他、windowオブジェクトに
onstorageプロパティを設定することでイベント発火を拾えます。

具体的には、次のような書き方になります。

addEventListenerを使う場合

window.addEventListener("storage", function(event)
{
    // ここで何らかの処理をする
    
});

onstorageプロパティを使う場合

window.onstorage = function(event)
{
    // ここで何らかの処理をする
    
}

Storage イベントの属性について

上記のaddEventListenerとonstorageプロパティの例では、
処理内容を全く記載していませんが、

functionの引数として渡ってくるイベントオブジェクト「event」に対しては、
次のようなプロパティがあります。

key
newValue
oldValue
storageArea
url

それぞれ、以下の意味があります。

key
 変更されたキーを表す
 clear()が呼び出された場合はnull

newValue
 key の新しい値
 removeItem()が呼び出された場合はnull

oldValue
 key の元の値
 新規登録時はnull

storageArea
 ストレージオブジェクトを取得(localStorage または sessionStorageの使用されているオブジェクト)

url
 keyが変更されたドキュメントのURL(文字列形式)

このStorage イベントを利用すると、同一出身ポリシーで呼び出されたwebアプリケーションで、
別タブや別ウィンドウで表示しているDOM操作を行ったタイミングで、
localStorageやsessionStorageを使いデータを保持し、値が変更されたタイミングでイベントを発火し、
別タブや別ウィンドウになんらかのイベントを発生させて同期を取るアプリケーションにすることができます。