JSFiddle - React, Tailwind, and code Playground

HTML

See <a href="http://stackoverflow.com/a/10505907/938089?is-there-any-workaround-to-make-use-of-html5-localstorage-on-both-http-and-https">Stack Overflow answer</a><br>

<iframe src="http://jsfiddle.net/gK7ce/3/show/" name="myPostMessage" onload="document.getElementById('test').style.display='block';" style="display:none;"></iframe>
<button id="test" onclick="test();//Inline evil">Test</button>

CSS

#test{display:none;}

JavaScript

// Example globals: LSsetItem, LSgetItem, callbacks
function test() {
    LSsetItem('test', 'Test: ' + new Date());
    LSgetItem('test', function(value) {
        if (confirm('Remove test:' + value + '?')) {
            LSremoveItem('test');
        }
    });
}

var domain = '*'; /*target*/
function LSsetItem(key, value) {
    var obj = {
        setItem: key,
        value: value
    };
    frames['myPostMessage'].postMessage(JSON.stringify(obj), domain);
}
var callbacks = {};
window.addEventListener('message', function(event) {
    if (event.source === frames['myPostMessage']) {
        console.log(event)
        var data = /^#localStorage#(\d+)(null)?#([\S\s]*)/.exec(event.data);
        if (data) {
            if (callbacks[data[1]]) {
                // null and "null" are distinguished by our pattern
                callbacks[data[1]](data[2] === 'null' ? null : data[3]);
            }
            delete callbacks[data[1]];
        }
    }
}, false);
function LSgetItem(key, callback) {
    var identifier = new Date().getTime();
    var obj = {
        identifier: identifier,
        getItem: key
    };
    callbacks[identifier] = callback;
    frames['myPostMessage'].postMessage(JSON.stringify(obj), domain);
}
function LSremoveItem(key) {
    var obj = {
        removeItem: key
    };
    frames['myPostMessage'].postMessage(JSON.stringify(obj), domain);
}