//Troy Whorten Feb 27, 2014 function respondToChange(e) { alert(e.key + " = " +e.newValue); } window.addEventListener('storage', respondToChange, false); function setPair() { var key = document.getElementById("key").value; var value = document.getElementById("value").value; if(key && value) { localStorage.setItem(key,value); } } function getStored() { document.getElementById('stored').innerHTML=''; var sdiv = document.getElementById('stored'); for( var i = 0; i < localStorage.length ; i++) { var key = localStorage.key(i); var value = localStorage.getItem(key); var newpair = document.createElement("span"); if(key && value) { newpair.innerHTML = key + " = " + value; sdiv.appendChild(newpair); sdiv.appendChild(document.createElement("br"));} } }
Troy's Local Storage Demo:<br> Enter a key:<input type="text" id="key" /><br> Enter a value:<input type="text" id="value" /><br> <button onclick="setPair()">Store Key/value pair</button> <button onclick="getStored()">Get Key/value pairs</button> <button onclick="document.getElementById('stored').innerHTML=''">Clear Display</button> <button onclick="{document.getElementById('stored').innerHTML='';localStorage.clear();}">Clear Local Storage</button> <br> <div id="stored"></div>