打开页面后使得动态加载的下拉列表框显示上一次用户选择的结果的实现办法

  如果你的后台网站页面不是以选项卡的形式展现的，而是打开a页面，再打开b页面时，a页面已经被覆盖的情况，那么当你再打开a页面时，之前在a页面上选择或者输入的信息全部丢失了，以下将介绍一种实现办法。

例如，当打开页面时，有一个下拉列表框是动态加载的，所以这里只占一个位置

  <div class="layui-col-xs6 layui-sm-4 layui-md-4 layui-lg-4" style="padding: 10px">
                    <div class="layui-inline">
                        <label class="layui-form-label">选择人员</label>
                        <div class="layui-input-block">
                            <select class='form-control input-fixed layui-input' id='select_employee' name='select_employee' lay-filter='select_employee'></select>
                        </div>
                    </div>
   </div>

 

js部分，采用ajax来动态获取下拉列表框的值

                $.ajax({
                                type: 'GET',
                                url: '/EditPeriodEmployee/getEmployeeId',
                                dataType: 'Json',
                                success: function (data) {
                                    console.log(data);
                                    data = JSON.parse(data);
                                    $("#select_employee").html("");
                                    $("#select_employee").append("<option value=''>全部门</option>")
                                    for (var i = 0; i < data.length; i++) {
                                        var item = data[i];
                                        console.log(item, item['EmployeeId'], item.EmployeeId);
                                        $("#select_employee").append("<option value=" + item['EmployeeId'] + ">" + item['EmployeeName'] + "</option>")
                                    }
                                    form.render();
                                }
                            });

现在由于我的页面不是选项卡形式展示的，甲方爸爸又需要我能够实现打开另外一个网页，再回来的时候之前在这个页面选择的东西还在，以下是实现办法

第一步，引入localStorage，将ajax查询的结果存起来

localStorage.setItem("key",data);

var employeeId = $('#select_employee').val();

localStorage.setItem("key_employeeId",employeeId);//存储用户到底选择的哪一项

注意，以上key随便什么都可以，这里方便好记忆，data为ajax查询出来的，不是JSON.parse(data)后的，不需要村json序列化后的形式

第二步，重新改写下拉列表框动态加载的代码结构

let getData=localStorage.getItem("key");

if(getData!==null){//直接渲染下拉列表框，引入判断

                                   data = JSON.parse(getData);

                                    let employeeId=localStorage.getItem("key_employeeId");
                                    $("#select_employee").html("");
                                    $("#select_employee").append("<option value=''>全部门</option>")
                                    for (var i = 0; i < data.length; i++) {
                                        var item = data[i];
                                       if(item['EmployeeId'] ===employeeId)//如果是用户选择的，则变成被选中状态

                          $("#select_employee").append("<option value=" + item['EmployeeId'] + " selected>" + item['EmployeeName'] + "</option>")

                                  else
                                        $("#select_employee").append("<option value=" + item['EmployeeId'] + ">" + item['EmployeeName'] + "</option>")
                                    }
                                    form.render();

}