JSFiddle - React, Tailwind, and code Playground

by ArondeParon

JavaScript

/**************************************************************
 * included from http://www.quirksmode.org/js/cookies.html
 *************************************************************/

function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    }
    else var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}

/**************************************************************
 * Actual code below
 *************************************************************/

var cookieRegistry = [];

function listenCookieChange(cookieName, callback) {
    setInterval(function() {
        if (cookieRegistry[cookieName]) {
            if (readCookie(cookieName) != cookieRegistry[cookieName]) {
                // update registry so we dont get triggered again
                cookieRegistry[cookieName] = readCookie(cookieName);
                return callback();
            }
        } else {
            cookieRegistry[cookieName] = readCookie(cookieName);
        }
    }, 100);
}

/**************************************************************
 * Test below
 *************************************************************/

// create the cookie
createCookie('foo', 'bar');

// bind the listener
listenCookieChange('foo', function() {
    alert('cookie foo has changed!');
});

// after 1 second, update the cookie value
setTimeout(function() {
    createCookie('foo', 'sdfsdf');
}, 1000);