JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<input type="text" remember-me="a">
<input type="text" remember-me="a">
<select remember-me="b">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select remember-me="b">
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>
<input type="checkbox" remember-me="c">
<input type="checkbox" remember-me="c">
<input type="RADIO" remember-me="d1" name="test">
<input type="RADIO" remember-me="d1" name="test">
<input type="radio" remember-me="d2" name="test">

JavaScript

console.clear();
(function () {
    var gSeq = 0;
    var localKey = {};

    function Remembered(id, value, type, seq) {
        this.id = id;
        this.value = value;
        this.type = type;
        this.seq = seq || ++gSeq;
    }

    Remembered.prototype.remember = function () {
        localKey["r" + this.id] = this;
        localStorage.rem = JSON.stringify(localKey);
        gSeq = this.seq + 1;
    };

    Remembered.prototype.restore = function (node) {
        var self = this;
        
        var els = document.querySelectorAll("[remember-me=" + this.id + "]");
        switch (this.type) {
            case "checkbox":
                Array.prototype.forEach.call(els, function (el) {
                    el.checked = self.value;
                });
                break;
            case "radio":
                Array.prototype.forEach.call(els, function (el) {
                    el.checked = self.value;
                });
                break;
            default:
                Array.prototype.forEach.call(els, function (el) {
                    if (!node || !node.isSameNode(el)) {
                    	el.value = self.value;
                    }
                });
        }
    };

    var evt = function (value) {
        var id = this.getAttribute("remember-me");
        var rem = new Remembered(id, value, this.type);
        rem.remember();
        rem.restore(this);
    };

    var remembers = document.querySelectorAll("[remember-me]:not([type=password])");
    remembers = Array.prototype.forEach.call(remembers, function (remember) {
        var id = remember.getAttribute("remember-me");
        if (!id) return;

        switch (remember.type) {
            case "checkbox":
            case "radio":
                remember.addEventListener("change", function () {
                    evt.bind(this)(this.checked);
                });
                break;
            default:
                remember.addEventListener("input", function ()...