记住ajax添加数据时按下返回button
我有一个search页面，每个search结果被添加到AJAX页面。 这样，我可以让用户search例如Led Zeppelin ，然后再次searchMetallica，但将其添加到与之前的search相同的结果列表中。
我的问题是，当用户点击一个链接到一条logging，然后点击返回button，回到search结果。
FireFox（7）保留页面，当我离开它时，显示完整的结果。
另一方面， IE（7,8）和Chrome（15）将显示在添加AJAX之前的任何search结果的页面，就好像它不记得我向其中添加数据。
以下是我使用的代码。 我试图添加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); }); });
我不需要一个后退button，可以跟踪search页面上的更改，例如逐个添加不同的search结果。 我只想让浏览器记住最后的search结果，当我点击后退button。
解决了
更改为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); } });
你有几个select。
- 使用localstorage记住最后一个查询
- 使用cookies（但不要）
- 在你使用
document.location.hash = "last search"尝试使用hash来更新url。 你会再看看哈希，如果它被设置，然后做另一个Ajax来填充数据。 如果你已经完成localstorage，那么你可以caching最后一个Ajax请求。
我会去与本地存储和散列解决scheme，因为这是一些网站做的。 您也可以复制和粘贴一个url，它只会加载相同的查询。 这是相当不错的，我会说非常方便。
我很好奇，为什么它不工作。 更新你的答案，所以我们可以帮助。
另一个解决scheme是在使用后退button的同时使用保留INPUT字段的事实。 所以，我喜欢这样做：
我的页面包含一个隐藏的input：
<input type="hidden" id="bfCache" value="">
一旦ajax内容被dynamic加载，我在显示之前将内容备份到隐藏字段中：
function loadAlaxContent() { var xmlRequest = $.ajax({ //prepare ajax request // ... }).done( function(htmlData) { // save content $('#bfCache').val( $('#bfCache').val() + htmlData); // display it displayAjaxContent(htmlData); }); }
最后要做的是在页面加载时testing隐藏的字段值。 如果它包含某些东西，那是因为后退button已被使用，所以我们只需要显示它。
jQuery(document).ready(function($) { htmlData = $('#bfCache').val(); if(htmlData) displayAjaxContent( htmlData ); });
我相信你可以使用哈希部分（在＃符号后面）来区分页面前ajax调用和后ajax调用，这样后退button将带你到后ajax调用版本。 你能详细说明为什么这个解决scheme不适合你吗？
此页面可能有所帮助：
http://ajaxpatterns.org/Unique_URLs#Bookmarkable.2C_Linkable.2C_and_Type-In-Able
“可collections的，可链接的和可input的
window.location.hash使得URL唯一，所以用户可以将它join书签，链接到它，并直接在浏览器中input。 window.onload确保书签被用来设置状态。 轮询或IFrame确保即使在基本URL（散列之前）相同的情况下也能正常工作。“
