Adicionar Event Listener No Storage Javascript

Alguma vez você já precisou verificar se houve alguma alteração no Session Storage ou Local Storage, com o Javascript?
Você sabia que é possível adicionarmos um event listener a esse pessoal da mesma forma que fazemos, por exemplo, em um botão ou um input?

É muito fácil e útil, com isso podemos ficar observando e caso o usuário faça alteração em algum determinado, podemos redirecionar ele para outra URL, impedindo que faça modificações deste tipo!

Olha como é simples:

1
2
3
4
5
6
7
8
function detectChange = () => {
window.addEventListener('storage', function (e) {
if (e.storageArea === sessionStorage && e.key === 'token_session') {
console.log('storage changed!');
sessionStorage.removeItem('paramKey');
}
});
}

Neste exemplo, estamos detectando mudanças no storage e dentro do if verificamos qual queremos pegar, com o e.storageArea, que pode ser sessionStorage ou localStorage!

Muito legal não é?