How to set and get values from datepicker fields and a select box and store them in local storage in javascript?

I am working on form in which I want get same data as I picked for dates field and selected the user id when window is duplicated, not on form submission. I want to store the values of audit, transcribe date, cru id and user id in local storage and get them in the fields when the browser window is duplicated.

<div class="col-sm-6 one">
                        <div class="form-group">
                            <label for="">Audit Date <span>*</span></label>
                            <input type="text" class="form-control datetimepicker-input auditdatepicker"
                                id="audit_date" name="audit_date" data-toggle="datetimepicker"
                                data-target=".auditdatepicker" required>
                        </div>

                    </div>
                    <div class="col-sm-6 one">
                        <div class="form-group">
                            <label for="">Transcribe Date <span>*</span></label>
                            <input type="text" class="form-control datetimepicker-input transcribedatepicker"
                                id="transcribe_date" name="transcribe_date" data-toggle="datetimepicker"
                                data-target=".transcribedatepicker" required>
                        </div>
                    </div>

                <div class="col-sm-6">
                    <div class="form-group">
                        <label>CRU ID</label>
                        <select name="cru_agent_detail_id" class="form-control select2" id="user_list">
                            <option value="">Select CRU ID</option>
                            @foreach ($users as $user)
                                <option value=""></option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-sm-6">
                    <label for="exampleInputEmail1">Agent Name</label>
                    <input type="text" class="form-control" name="name" id="agent_name" placeholder="Agent Name"
                        readonly>
                </div>

Basically I am not getting the point of how to get the values of above mentioned fields. When browser window is duplicated. The javscript code I tried is:

$(document).ready(function() {
        $('#user_list').change(function() {
            localStorage.setItem('user_list', cru_id);
            var id = $(this).val();
            $.ajax({
                url: 'get-user-detail/' + id,
                type: 'get',
                dataType: 'json',
                success: function(response) {
                    user = response.data
                    agent_name = $("#agent_name").val(user.name);
                    localStorage.setItem('agent_name', agent_name);
                }
            })
        });
    });

Via Active questions tagged javascript - Stack Overflow https://ift.tt/3hjE4JF