如何在页面之间保存 AJAX 查询的结果

>背景信息

我有一个包含搜索页面的Web应用程序。 此搜索提供了 3 个通过 ajax 填充的不同下拉框。首次加载页面时，框 1 中填充了默认位置的列表。当用户选择一个位置时，第二个下拉列表将出现在同一页面上，并通过 ajax 填充所选位置内的建筑物。选择建筑物后，将显示包含房间列表的最后一个下拉框。用户选择房间后，页面将显示有关房间的详细信息，用户可以向下钻取到其中一个房间属性 - 这会将他们带到新页面。

问题描述

当用户完成查看房间详细信息网页并点击"后退"按钮时，我希望能够向他们显示他们上次离开的地方......这是搜索页面，其中包含他们之前的所有选择，这些选择将他们引导至房间详细信息。 目前，当他们点击后退按钮时，默认搜索页面将加载，他们以前的选择将消失。

保留其搜索请求详细信息的最佳方法是什么？我正在考虑向 URL 添加值...就像查询字符串一样。 现在，URL当然不会改变，因为一切都是通过ajax/javascript为搜索页面完成的。但除了这个选项之外，我想知道是否有另一种想法/方法来完成同样的事情。

该解决方案必须适用于所有浏览器，包括IE，Chrome，FFox，Safari。

法典

当它们更改下拉列表中的值时触发的 AJAX 代码：

 $('#Locations').live('change',function(){
    $.ajax({
        url:"<?php echo site_url('mycontroller/getbuildings/');?>" + "/" + $selectedvalue,
        type:'GET',
        dataType:'json',
        success: function(returnDataFromController) {
             logic to populate building drop down
        }

 $('#buiding_Locations').live('change',function(){
     $('#room_locations').html('');
     $('#search').hide();
      var htmlstring;
      $selectedvaluebranch_ = $('#Locations').val();
      $selectedvaluebuiding_ = $('#buiding_Locations').val();
      $.ajax({
                url:"<?php echo site_url('mycontroller/getrooms');?>" + "/" + $selectedvaluebuiding_,
                type:'GET',
                dataType:'json',
                success: function(returnDataFromController) {
                    logic to populate room list
                }

在填写位置下拉列表的方法中，(mycontroller/getLocations(我添加了使用/检查会话变量的逻辑...现在，当我单击后退按钮时，位置选择已保存。 "mycontroller/getLcations"方法是加载搜索页时调用的默认方法。

但是我想知道填充其他两个下拉框的最佳方法。如您所见，仅当用户更改"父"下拉框的值时，才会填充它们。

也许我需要在我的控制器中创建另一个方法，对所有 3 个框进行查询......并将所有这些数据发送到前端，而不是我现在这样做的方式......对 3 个单独的方法进行 3 次单独调用。然后，我需要将填充各个下拉框的逻辑从它们现在的位置移出到一个可重用的函数，该函数可以在用户进行新选择时调用，或者当我尝试使用会话变量中的搜索数据时调用。

如果有更简单的方法可以做到这一点，请告诉我。 我只是想确保我没有不必要地编写额外的代码/我正在正确重构。

function updateForms(type,value){
 $.ajax({
      url:mainURL+"/mycontroller/getdata",
      type:"POST",
      data:{
            dropdownSelected:type,
            value:value
      },
      success:function(returnData){
            populate(returnData.form);
      });