Session Storage Demo

Type anything you want into box and then view it by clicking the 'View Storage' button. If you perform a page refresh the data will still be there but if you close the tab and then reload it it will be gone (this is also the case if you ctrl + f5).

If you click the Clear Storage button below it will clear the current session.

Session Storage Code Snippet

1. HTML

<input type="text" name="text" id="input-text" placeholder="Type here..." />
<input type="button" id="view-storage" value="View Storage" />
<p id="storage">
</p>
<p>
If you click the Clear Storage button below it will clear the current session.
</p>
<input type="button" id="clear-storage" value="Clear Storage" />

2. JavaScript

//Remy Sharps script to hook the events
<script src="http://html5demos.com/js/h5utils.js"></script>
<script>
(function () {
    var text = document.getElementById('input-text');
    text.addEventListener('keyup', function () {
        sessionStorage.text = text.value;
    }, false);
    //Gets the Session Storage and then displays it as HTML
    document.getElementById('view-storage').addEventListener('click', function (e) {
        e.preventDefault();
        document.getElementById('storage').innerHTML = 'Your stored value is ' + sessionStorage.text;
    }, false);
    //Clears the Session Storage
    addEvent(document.getElementById('clear-storage'), 'click', function () {
        sessionStorage.clear();
        window.location = window.location; // refresh
    });
}
());
</script>