JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<h1>Web Storage API</h1>

<fieldset>
<legend>target storage type</legend>
<label><input type="radio" name="type" value="local"   checked />local</label><br />
<label><input type="radio" name="type" value="session"         />session</label>

<fieldset>
<legend>setItem</legend>
<span class="item-label">key:</span><input type="text" id="set-key" /><br />
<span class="item-label">value:</span><input type="text" id="set-value" /><br />
<button id="set" class="button gray medium">set</button>
<span id="set-message"></span>
</fieldset>

<fieldset>
<legend>getItem</legend>
<span class="item-label">key:</span><input type="text" id="get-key" /><br />
<button id="get" class="button gray medium">get</button>
<span id="get-message"></span>
</fieldset>

<fieldset>
<legend>removeItem</legend>
<span class="item-label">key:</span><input type="text" id="remove-key" /><br />
<button id="remove" class="button gray medium">remove</button>
<span id="remove-message"></span>
</fieldset>

<fieldset>
<legend>clear</legend>
<button id="clear" class="button gray medium">clear</button>
</fieldset>

<fieldset>
<legend>scan all key/value</legend>
<button id="scan" class="button gray medium">scan</button>
</fieldset>

<fieldset>
<legend>key/value</legend>
<pre id="scan-result">



</pre>
</fieldset>

</fieldset>

CSS

.medium {
    font-size: 12px;
    padding: .4em 1.5em .42em;
}
.small {
    font-size: 11px;
    padding: .2em 1em .275em;
}

fieldset {
    background: #eee;
    margin-top: 1.5em;
    border: 1px solid #666;
}
fieldset legend {
    background: #eee;
    border: 1px solid #666;
    padding: 0.2em 1em 0.2em 1em;
    font-weight: normal;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
fieldset pre {
    padding: 1em;
    background: #bbb;
    border: 1px inset #999;
}
fieldset button {
    margin-top: 1em !important;
}

.item-label {
    display: block;
    width: 4em;
    float: left;
}

JavaScript

var ws = (function() {
    var _storage; // window.localStorage or window.sessionStorage

    function _displayAllKeyValue() {
        var now = new Date();
        var key;
        var message = [];
        var msgArea = $('#scan-result');
        msgArea.empty();

        message.push('last update: '+now.toLocaleString());
        for (var i=0, length=_storage.length; i<length; i++) {
            key = _storage.key(i);
            message.push(key+" "+_storage.getItem(key));
        }
        msgArea.text(message.join("\n"));
    }

    function _clearOthers(exceptId) {
        if (exceptId !== "set") {
            $($('input[id*="set"]')).val("");
            $($('span[id*="set"]')).text("");
        }
        if (exceptId !== "get") {
            $($('input[id*="get"]')).val("");
            $($('span[id*="get"]')).text("");
        }
        if (exceptId !== "remove") {
            $($('input[id*="remove"]')).val("");
            $($('span[id*="remove"]')).text("");
        }
    }

    return {
        init: function() {
            this.selectType();
            this.scan();
        },
        selectType: function(evt) {
            _clearOthers(null)
            $('input[name="type"]').each(function(index) {
                if ($(this).attr('checked')) {
                    var type = $(this).val();
                    if (type === "local") {
                        _storage = window["localStorage"];
                    } else if (type === "session") {
                        _storage = window["sessionStorage"];
                    } else {
                        _storage = undefined;
                    }
                    return;
                }
            });
            _displayAllKeyValue();
        },
        setItem: function(evt) {
            var key, value, message = [];
            var msgArea = $('#set-message');
            msgArea.empty();
            _clearOthers($(evt.currentTarget).attr('id'));

            if (!(key =...