JavaScript: using the session storage

by Akram kamal

HTML

<p>
    <button id="set">Set Item</button>
    <button id="get">Get Item</button>
    <button id="count">Length</button>
    <button id="remove">Remove Item</button>
    <button id="clear">Clear</button>
    <button id="save-obj">Save Object</button>
    <button id="get-obj">Get Object</button>
</p>
<div id="output"></div>

CSS

#output {
    margin: 1em 0;
    font-family: monospace;
}

JavaScript

var Storage = {
    set: function (item, value) {
        sessionStorage.setItem(item, value);
    },
    get: function (item) {
        var value = sessionStorage.getItem(item);
        return value;
    },
    count: function () {
        var len = sessionStorage.length;
        return len;
    },
    remove: function (item) {
        sessionStorage.removeItem(item);
    },
    empty: function () {
        sessionStorage.clear();
    },
    saveObject: function (item, obj) {
        if (typeof obj === 'object') {
            this.set(item, JSON.stringify(obj));
        } else {
            this.set(item, 'Could not convert to JSON string');
        }
    },
    getObject: function (item) {
        var json = this.get(item);
        var obj = JSON.parse(json);
        return obj;
    }
};

var set = document.getElementById('set'),
    get = document.getElementById('get'),
    count = document.getElementById('count'),
    remove = document.getElementById('remove'),
    clear = document.getElementById('clear'),
    saveObj = document.getElementById('save-obj'),
    getObj = document.getElementById('get-obj'),
    output = document.getElementById('output');

set.onclick = function () {
    Storage.set('test', 'value');
};
get.onclick = function () {
    var value = Storage.get('test');
    output.innerHTML = value;
};
count.onclick = function () {
    var len = Storage.count();
    output.innerHTML = len;
};
remove.onclick = function () {
    Storage.remove('test');
};
clear.onclick = function () {
    Storage.empty();
};
saveObj.onclick = function () {
    var obj = {
        test: 'value'
    };
    Storage.saveObject('obj', obj);
};
getObj.onclick = function () {
    var obj = Storage.getObject('obj');
    output.innerHTML = JSON.stringify(obj);
};