记住ajax添加数据时点击返回按钮

我有一个搜索页面，每个搜索结果添加到AJAX页面。这样我可以让用户搜索例如Led Zeppelin，然后再搜索Metallica，但将它添加到与上一次搜索相同的结果列表中。记住ajax添加数据时点击返回按钮

我的问题是当用户点击一个链接到记录，然后点击后退按钮，回到搜索结果。
FireFox（7）使页面保持原样，当我离开它时，显示完整的结果。
IE（7,8）和另一方面，Chrome（15）会像添加AJAX之前一样显示页面，就好像它不记得我向它添加数据一样。

以下是我使用的代码。我试图添加location.hash = "test";，但它似乎没有工作。

// Add search result 
$("#searchForm").submit(function (event) { 
    //location.hash = "test"; 
    event.preventDefault(); 

    $.post($(this).attr('action'), $(this).serialize(), 
    function (data) { 
     $("tbody").append(data); 
    }); 
});

我不需要一个后退按钮来跟踪搜索页面上的变化，就像逐步添加每个不同的搜索结果一样。当我点击后退按钮时，我只想让浏览器记住上次的搜索结果。

解决
更改为document.location.hash = "latest search"没有任何改变。埃米尔指出，我必须使用localStorage。

这进入了jQuery代码的其余部分：

// Replace the search result table on load. 
if (('localStorage' in window) && window['localStorage'] !== null) { 
    if ('myTable' in localStorage && window.location.hash) { 
     $("#myTable").html(localStorage.getItem('myTable')); 
    } 
} 

// Save the search result table when leaving the page. 
$(window).unload(function() { 
    if (('localStorage' in window) && window['localStorage'] !== null) { 
     var form = $("#myTable").html(); 
     localStorage.setItem('myTable', form); 
    } 
});

来源

2011-10-31 Niklas

谢谢它的作品！ – joselo

懒人的解决方法是在所有链接上使用'target =“_ blank”'。这样后退按钮不会成为问题。 –

您有几种选择。

使用localstorage记住上次查询
使用cookie（但没有）
为您document.location.hash = "last search"尝试更新URL中使用的哈希值。你会再看看哈希，如果它被设置，然后做另一个Ajax来填充数据。如果你已经完成localstorage，那么你可以缓存最后一个Ajax请求。

我会去localstorage和散列解决方案，因为这是一些网站做的。您也可以复制并粘贴一个网址，它只会加载相同的查询。这很不错，我会说非常方便。

我很想知道它为什么不起作用。更新您的答案，以便我们提供帮助。

来源

2011-10-31 16:32:33

我相信你可以使用哈希部分（＃号后面）来区分页面前ajax调用和后ajax调用，这样后退按钮将带你到后ajax调用版本。你能详细说明为什么这个解决方案不适合你吗？

本页面可以帮助：

http://ajaxpatterns.org/Unique_URLs#Bookmarkable.2C_Linkable.2C_and_Type-In-Able

“可收藏，可链接和Type-IN-能

window.location.hash使URL唯一的，因此用户可以收藏它，链接到它，并直接输入到他们的浏览器window.onload 确保书签用于设置状态轮询或IFrame保证即使当基地址（在散列之前）是相同的“。

来源

2011-10-31 16:33:32 jbabey

另一种解决方案是使用INPUT字段在使用后退按钮时保留的事实。所以，我做这样的：

我的页面包含隐藏这样的输入：

<input type="hidden" id="bfCache" value="">

一旦AJAX内容dynamicaly装，我备份内容到我的隐藏字段显示它之前：

function loadAlaxContent() 
{ 
    var xmlRequest = $.ajax({ 
      //prepare ajax request 
      // ... 
     }).done(function(htmlData) { 
      // save content 
      $('#bfCache').val($('#bfCache').val() + htmlData); 

      // display it 
      displayAjaxContent(htmlData); 
     }); 
}

最后要做的是在页面加载时测试隐藏字段值。如果它包含某些内容，那是因为后退按钮已被使用，所以我们只需要显示它。

jQuery(document).ready(function($) { 

    htmlData = $('#bfCache').val(); 

    if(htmlData) 
     displayAjaxContent(htmlData); 
});

来源

2014-06-06 13:22:09

只要项目的限制是可以接受的，我就喜欢这个解决方案。如果您有搜索并且结果使用ajax加载并包含指向详细信息页面的链接，请单击详细信息页面链接，然后返回并且结果仍然存在。但是，如果您要在这些结果上单击另一个项目的详细信息页面，则会再次退回缓存。对于某些情况来说很好的解决方案！ – James

记住ajax添加数据时点击返回按钮

回答

相关问题