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 |
タイプを判定する
基本的にはoldValueとnewValueの値のチェックで判定できます。
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.htmlでlocalStorageの値を操作するとreceiveStorageEvent.htmlのコンソールに各タイプの判定結果が出力されます。