JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<input remember-me="rm1">
<input remember-me="rm1">
<input remember-me="rm2">
<input remember-me="rm2">
<select remember-me="rm3">
    <option>Value1</option>
    <option>Value2</option>
</select>

CSS

body {
    font-size: 0;
    margin: 2px
}
input {
    margin: 2px;
    font-size: 10pt;
}

JavaScript

console.clear();

//Sample event handlers
(function () {
    var remembers = document.querySelectorAll("input[remember-me],select[remember-me]");
    remembers = Array.prototype.forEach.call(remembers, function (remember) {
        remember.addEventListener("rmupdate", function () {
            console.log("Updated", this);
        });
        remember.addEventListener("rmrefresh", function () {
            console.log("Refreshed", this);
        });
    });
})();

//Rememberme
(function () {
    var events = {
        update: new Event("rmupdate"),
        refresh: new Event("rmrefresh")
    };
    var cache = Object.create(null);
    var remembers = document.querySelectorAll("input[remember-me]:not([type=password]),select[remember-me]");
    remembers = Array.prototype.forEach.call(remembers, function (remember) {
        var id = remember.getAttribute("remember-me");
        if (!id) {
            console.error("remember-me found without an identifier.  This value will not be remembered!");
        }

        if (!cache[id]) cache[id] = [];
        cache[id].push(remember);

        remember.addEventListener("input", function () {
            //Update all inputs sharing the same ID
            var self = this;
            cache[id].forEach(function (share) {
                if (share !== self) share.value = self.value;
                share.dispatchEvent(events.update);
            });

            updateLocal();
        });
    });

    refreshLocal();

    function refreshLocal() {
        var json = localStorage.rememberMe;
        if (json) {
            var obj = JSON.parse(json);
            Object.keys(obj).forEach(function (key) {
                var els = document.querySelectorAll("[remember-me=" + key + "]");
                Array.prototype.forEach.call(els, function (el) {
                    el.value = obj[key];
                    el.dispatchEvent(events.refresh);
                });
            });
        }
    }

    function updateLocal() {
  ...