JSFiddle - React, Tailwind, and code Playground

by absentik

HTML

<script src="https://rawgit.com/absentik/DataSaver/master/jquery.DataSaver.js"></script>
<p>Select 1: 
    <select class="save" id="select1" name="select1">
        <option selected="selected"></option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
    </select>
</p>

<p>Select 2: 
    <select class="save" id="select2" name="select2">
        <option selected="selected"></option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
    </select>
</p>

JavaScript

var select2_obj;

$(document).ready(function() {
    
    $(".save").DataSaver({ 
        timeout: 0, 
        events: "change keyup", 
        keyUrlAttrs: ["host", "pathname", "search"]
    });
    
    $("#select2").on("DataSaver_save", function() {
        var key = $("#select2").prop("DataSaver_key");
        var val = localStorage[key];  
        
        var key2 = $("#select2").val();
        select2_obj[key2] = val;        
        localStorage[key] = select2_obj;
    });
    
    $("#select2").on("DataSaver_load", function() {
            var key = $("#select2").prop("DataSaver_key");
            var val = localStorage[key];
        
            select2_obj = typeof(val) === "object" ? val : {};
            select2_obj
    });
});