Apagar todos os dados - clear()
Instruções: Abra esta página em duas janelas ou abas. Entre um valor qualquer para o dado a armazenar. Clique em "Armazenar - setItem(). Visualize a outra janela (aba) aberta e observe a mensagem inserida. Faça outras leituras clicando nos links para apagar dados. Após o clique as leituras devem ser feitas na outra janela (aba) aberta, pois o evento não dispara na janela (aba) onde o método foi aplicado e sim nas outras abertas.
<script>
function msgEvento(e) {
if(!e) {e = window.event;}
var limpar = document.getElementById('limpar');
var containerMensagem = document.getElementById('mensagem');
var mensagem = 'Disparado o evento: '+ e.type +'
';
mensagem += 'Nome do dado modificado: '+ e.key +'
';
mensagem += 'Valor antigo o dado: '+ e.oldValue +'
';
mensagem += 'Valor atual do dado modificado: '+ e.newValue +'
';
mensagem += 'Área de armazenamento: '+ e.storageArea +'
';
mensagem += 'URL das modificações: '+ e.url;
containerMensagem.innerHTML = mensagem;
limpar.onclick = function() {
containerMensagem.innerHTML = '';
}
}
function salvarDado(name) {
var valor = document.forms['dadoform'].dadovalue.value;
if (!valor)
alert('Entre um valor para o dado a armazenar.');
else {
localStorage.setItem(name, valor);
}
}
function apagarDado(name) {
localStorage.removeItem(name);
}
function clearDados() {
localStorage.clear();
}
if (window.addEventListener) {
window.addEventListener('storage', msgEvento, false);
}else{
window.attachEvent('onstorage', msgEvento)
}
</script>
<section>
<form name="dadoform" action="#">
<p><label>Escolha um valor para o dado "meuDado":</label><br> <input name="dadovalue"></p>
</form>
<p><a href="#" onClick="salvarDado('meuDado')">Armazenar - setItem()</a></p>
<p><a href="#" onClick="apagarDado('meuDado')">Apagar dado - removeItem()</a></p>
<p><a href="#" onClick="clearDados()">Apagar todos os dados - clear()</a></p>
<p id="mensagem"></p>
<button type="button" id="limpar">Limpar</button>
</section>