CIS 119 Web Storage Demo 2

Example

Code

function $(id) {
    return document.getElementById(id);
}

function clearTextBoxes() {
    $('value').value = "";
    $('key').value = "";
}

function saveSession() {
    if (!sessionStorage) {
        alert("Your browser does not support session web storage");
    } else {
        var key = $('key').value;
        var value = $('value').value;
        if (key && value) sessionStorage.setItem(key, value);
        else alert("Either the key or value (or both) were missing.");
        window.location.reload();
    }
    clearTextBoxes();
    return false;
}

function saveLocal() {
    if (!localStorage) {
        alert("Your browser does not support local web storage");
    } else {
        var key = $('key').value;
        var value = $('value').value;
        if (key && value) localStorage.setItem(key, value);
        else alert("Either the key or value (or both) were missing.");
        window.location.reload();
    }
    clearTextBoxes();
    return false;
}

function clearStorage() {
    if (localStorage) localStorage.clear();
    if (sessionStorage) sessionStorage.clear();
    window.location.reload();
    return false;
}

window.onload = function() {
    clearTextBoxes();
    $('btnSaveLocal').onclick = saveLocal;
    $('btnSaveSession').onclick = saveSession;
    $('btnClear').onclick = clearStorage;

    var msg = "";
    var i = 0;
    if (sessionStorage) {
        var ssLength = sessionStorage.length;
        if (ssLength > 0) {
            msg += '<h3>Session storage</h3>';
            msg += '<ol type="1">';
            for (i=0; i<ssLength; i++) {
                var ssKey = sessionStorage.key(i);
                msg += '<li>' + ssKey + ' = ' + sessionStorage.getItem(ssKey) + '</li>';
            }
            msg += '</ol>';
        }
    }
    if (localStorage) {
        var lsLength = localStorage.length;
        if (lsLength > 0) {
            msg += '<h3>Local storage</h3>';
            msg += '<ol type="1">';
            for (i=0; i<lsLength; i++) {
                var lsKey = localStorage.key(i);
                msg += '<li>' + lsKey + ' = ' + localStorage.getItem(lsKey) + '</li>';
            }
            msg += '</ol>';
        }
    }
    if (!localStorage && !sessionStorage) $('results').innerHTML = '<h3>Web storage not available.</h3>';
    else if (msg == "") $('results').innerHTML = '<h3>No data found in web storage.</h3>';
    else $('results').innerHTML = msg;
};