Local Storage Example

by zerrax

HTML

<input type="text" id="field" />

<input type="button" value="Save" id="save" />
<input type="button" value="Read" id="read" />
<input type="button" value="Clear" id="clear" />

<iframe src="data:text/html;base64,PGh0bWw+Cjxib2R5Pgo8aW5wdXQgdHlwZT0idGV4dCIgaWQ9ImZpZWxkIiAvPgoKPGlucHV0IHR5cGU9ImJ1dHRvbiIgdmFsdWU9IlNhdmUiIGlkPSJzYXZlIiAvPgo8aW5wdXQgdHlwZT0iYnV0dG9uIiB2YWx1ZT0iUmVhZCIgaWQ9InJlYWQiIC8+CjxpbnB1dCB0eXBlPSJidXR0b24iIHZhbHVlPSJDbGVhciIgaWQ9ImNsZWFyIiAvPgo8c2NyaXB0Pgp2YXIgZmllbGQgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgiZmllbGQiKSwKICAgIHNhdmUgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgic2F2ZSIpLAogICAgcmVhZCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJyZWFkIiksCiAgICBjbGVhciA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJjbGVhciIpOwogCi8vIE1hbmFnZSBTYXZlIGV2ZW50CnNhdmUuYWRkRXZlbnRMaXN0ZW5lcigiY2xpY2siLCBmdW5jdGlvbihlKXsKICAgIGxvY2FsU3RvcmFnZS5zZXRJdGVtKCJodHRwOi8vanNmaWRkbGUubmV0L3plcnJheC93cGE1OHNjaC8xMS8iICsgImUiLCAiZmllbGQudmFsdWUiKTsKCn0sIHRydWUpOwoKLy8gTWFuYWdlIFJlYWQgRXZlbnQKcmVhZC5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsIGZ1bmN0aW9uKGUpewogICAgY29uc29sZS5sb2cod2luZG93LmxvY2FsU3RvcmFnZVsiZSJdLnNwbGl0KCIsIilbMF0pOwp9LCB0cnVlKTsKCi8vIE1hbmFnZSBjbGVhciBldmVudApjbGVhci5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsIGZ1bmN0aW9uKGUpewogICAgd2luZG93LmxvY2FsU3RvcmFnZS5jbGVhcigpOwp9LCB0cnVlKTsKPC9zY3JpcHQ+CjwvYm9keT4KPC9odG1sPg==" frameborder="0"></iframe>

JavaScript

var field = document.getElementById("field"),
    save = document.getElementById("save"),
    read = document.getElementById("read"),
    clear = document.getElementById("clear");
 
// Manage Save event
save.addEventListener("click", function(e){
localStorage.setItem("window.location.pathname" + "e", "field.value");

}, true);

// Manage Read Event
read.addEventListener("click", function(e){
    alert(window.localStorage["e"].split(",")[0]);
}, true);

// Manage clear event
clear.addEventListener("click", function(e){
    window.localStorage.clear();
}, true);