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>