양식의 브라우저 창이 복제될 때 javascript의 로컬 저장소에서 검색된 값을 표시하는 방법은 무엇입니까?

`<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="{{ $user->id }}">{{ $user->cru_id }}</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>`

`$(document).ready(function() {
        /* let id;
        id = localStorage.getItem('cru_id');
        console.log(id) */

        $('#user_list').change(function() {
            cru_id = $('#user_list').find(":selected").text();
            localStorage.setItem('cru_id', cru_id);
            get_cru_id = JSON.stringify(localStorage.getItem('cru_id'));
            console.log(get_cru_id);
            id = $(this).val();
            $.ajax({
                url: 'get-user-detail/' + id,
                type: 'get',
                dataType: 'json',
                success: function(response) {
                    let user = response.data
                    $("#agent_name").val(user.name);
                    agent_name = $("#agent_name").val();
                    localStorage.setItem('agent_name', $("#agent_name").val());
                    get_agent_name = JSON.stringify(localStorage.getItem('agent_name'));
                    console.log(get_agent_name);
                }
            })
        });
    });`