JSFiddle - React, Tailwind, and code Playground

by Wesley Smith

HTML

<label style="color: #01ACEE; font: bold 14px Tahoma;">Input &nbsp;&nbsp;&nbsp;
    <input class="useLocal useLocalInput" id="testInput" size="40" type="text" name="website" value="" required/>
</label>
<br/>
<br/>
<label style="color: #01ACEE; font: bold 14px Tahoma;">Select</label>
<select class="useLocal useLocalSelect" id="testSelect" name="start_date">
    <option value="">Select one...</option>
    <option value="January">January</option>
    <option value="February">February</option>
    <option value="March">March</option>
    <option value="April">April</option>
    <option value="May">May</option>
    <option value="June">June</option>
    <option value="July">July</option>
    <option value="August">August</option>
    <option value="September">September</option>
    <option value="October">October</option>
    <option value="November">Noember</option>
    <option value="December">December</option>
</select>
<br/>
<br/>
    <input type="button" class="clearLocalSelect" value="Clear Selects"/>

JavaScript

$('.useLocalSelect').change(function () {
    var key = $(this).attr('id');
    var value = $(this).val();
    localStorage.setItem(key, value)
});

var t = '';
$('.useLocalInput').keyup(function () {
    clearTimeout(t);
    var key = $(this).attr('id');
    var value = $(this).val();
    t = setTimeout(function () {
        localStorage.setItem(key, value)
    }, 2000);
});

$('.useLocal').each(function () {
    var key = $(this).attr('id');
    if (localStorage.getItem(key)) {
        $(this).val(localStorage.getItem(key));
    }
});

$('.clearLocalSelect').click(function () {
    $('.useLocalSelect').each(function () {
        $(this).val('');
        var key = $(this).attr('id');
        localStorage.removeItem(key);
    });
});