JSFiddle - React, Tailwind, and code Playground

by rodneyrehm

HTML

<button id="send">send</button>
<!--
    If writing to disk and emitting the storage event were atomic, you'd see something like
        sent rq111
        rs111
        sent rq222
        rs222
    In fact they are not only not atomic, but the to be emitted storage events are collected and emitted in batch at some point.
    
-->

JavaScript

// Test 1 - response flooding

localStorage.clear();

function log(message) {
    p = document.createElement("p");
    p.innerHTML = message;
    document.body.appendChild(p);
}

window.addEventListener('storage', function(e) {
    var oldKey = '',
        time = e.newValue,
        p;
    
    if (e.newValue && e.newValue.indexOf("|") > -1) {
        time = time.split('|');
        oldKey = " for " + time[0];
        time = time[1];
    }

    log(e.key + oldKey + ' sent ' + time + ' received ' + +(new Date()));
    
    if (e.key.substring(0, 2) === 'rs') {
        return;
    }
    
    // respond
    var key = +(new Date());
    localStorage.setItem('rs' + key++, e.key + '|' + +(new Date()));
    localStorage.setItem('rs' + key++, e.key + '|' + +(new Date()));
    
    for (var i=0; i < 10000000; i++) {
        // wasting some time
        "hello ".substring(3);
    }
    
    localStorage.setItem('rs' + key++, e.key + '|' + +(new Date()));
    localStorage.setItem('rs' + key++, e.key + '|' + +(new Date()));
});

var sender = document.getElementById('send');
sender.onclick = function(e) {
    var key = +(new Date()), k, t;
    localStorage.setItem( k = 'rq' + key++, t = +(new Date()));
    log("sent " + k + " at " + t);
    localStorage.setItem( k = 'rq' + key++, t = +(new Date()));
    log("sent " + k + " at " + t);
    
    for (var i=0; i < 10000000; i++) {
        // wasting some time
        "hello ".substring(3);
    }
    
    localStorage.setItem( k = 'rq' + key++, t = +(new Date()));
    log("sent " + k + " at " + t);
    localStorage.setItem( k = 'rq' + key++, t = +(new Date()));
    log("sent " + k + " at " + t);
};