detect StorageEvent Type

changeStorage.html

<h1>emit StorageEvent</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('value1','setitem');
		localStorage.value1 = "setitem";
	});

	document.getElementById('update').addEventListener('click',function(){
		// localStorage.setItem('value1','update');
		localStorage.value1 = 'update';
	});

	document.getElementById('get').addEventListener('click',function(){
		// localStorage.getItem('value1');
		localStorage.value1;
	});

	document.getElementById('remove').addEventListener('click',function(){
		// localStorage.removeItem('value1');
		delete localStorage.value1;
	});

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

detectStorageEventType.js

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

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

	// console.log(event.key)
	// console.log(oldValue,newValue);
	// console.log(storageArea,storageArea.length)

	console.log(event);

	if( oldValue === null && newValue !== null){
		console.log('type : add');
		console.log('key : '+event.key,', value : '+event.newValue);
	}else
	if( oldValue !== null && newValue === null){

		console.log('type : remove');
		// lengthチェックしてからかどうか判定

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

		console.log('type : update');
		console.log('key : '+event.key, ', newValue : '+event.newValue, ', oldValue : '+event.oldValue);

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

		console.log('type : clear');

	}

});

receiveStorageEvent.html

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