Posted at

localStorageのstorageイベントのタイプ判定

More than 5 years have passed since last update.

localStorageにはstorageというイベントがあり,localStorageに変更があった場合に発火します

このstorageイベントはlocalStorageを変更したドキュメント以外の,同じlocalStorageを共有しているwindow(タブ)で発火します。

変更を加えたドキュメント内では何も起きません。

storageイベントのeventオブジェクトのプロパティにはlocalStorageにどんな変更を加えたかの情報がないので,プロパティの値から判定する必要があります。(あるよね?)


storageイベントが発火するタイミング

storageイベントはlocalStorageに変更が加えられたときにだけ発火します。変更がない場合には発火しません。


実行するメソッドと状況によるイベント発火の有無

メソッド
状況
タイプ
イベント発火

.getItem(key)
すべて
取得

.setItem(key, value)
keyが存在しない場合
追加

keyが存在してて既存のvalueとsetするvalueが違う
更新

keyが存在してて既存のvalueとsetするvalueが同じ
---

.removeItem(key)
keyが存在している
削除

keyが存在しない
---

.clear()
localStorage内にkeyが1つ以上存在している
全削除

localStorage内にkeyが1つも存在しない
---

.getItem()ではあらゆる状況で発火しません。

.setItem()keyがすでに存在してる&&setするvalueが一緒の場合は発火しません。

.removeItem()は削除しようとしたkeyが存在しない場合発火はしません。

.clear()localStorageに値が1つも入っていない場合は発火しません。


各タイプのeventオブジェクトのプロパティの値

それぞれのタイプごとのeventオブジェクト内の主要な(判定に使う)プロパティは以下のようになります。

タイプ
key
oldValue
newValue

追加
key
null
value

更新
key
oldValue
value

削除
key
oldValue
null

全削除
""
null
null


タイプを判定する

基本的にはoldValuenewValueの値のチェックで判定できます。

clearの判定には念のためstorageAreaの要素数をチェックしています。


receiveStorageEvent.html

<h1>receiveStorageEvent</h1>

<script src="./detectStorageEventType.js"></script>


detectStorageEventType.js

window.addEventListener("storage", function (event) {

var oldValue = event.oldValue;
var newValue = event.newValue;
var storageArea = event.storageArea;

/* console.log(event) */

if( oldValue === null && newValue !== null){

console.log( "type : add" );

}else if( oldValue !== null && newValue === null){

console.log( "type : remove" );

}else if( oldValue !== null && newValue !== null){

console.log( "type : update" );

}else if( oldValue === null && newValue === null && storageArea.length === 0){

console.log( "type : clear" );

}
});



sendStorageEvent.html

<h1>sendStorageEvent</h1>

<button id="set">set</button>
<button id="update">update</button>
<button id="get">get</button>
<button id="remove">remove</button>
<button id="clear">clear</button>

<script>
document.addEventListener( "DOMContentLoaded", function(){

document.getElementById( "set" ).addEventListener( "click", function(){
localStorage.setItem( "hoge", "setitem" );
});

document.getElementById( 'update').addEventListener( "click", function(){
localStorage.setItem( "hoge", "update" );
});

document.getElementById( "get" ).addEventListener( "click", function(){
localStorage.getItem( "hoge" );
});

document.getElementById( "remove" ).addEventListener( "click", function(){
localStorage.removeItem( "hoge" );
});

document.getElementById( "clear" ).addEventListener( "click", function(){
localStorage.clear();
});
});
</script>



つかいかた

同じブラウザで2つのHTMLファイルを開きます。

sendStorageEvent.htmllocalStorageの値を操作するとreceiveStorageEvent.htmlのコンソールに各タイプの判定結果が出力されます。