Hãy nhớ ajax đã thêm dữ liệu khi nhấn nút quay lại

Question

Tôi có một trang tìm kiếm nơi mọi kết quả tìm kiếm được thêm vào trang bằng AJAX. Bằng cách này, tôi có thể cho phép người dùng tìm kiếm ví dụ: Led Zeppelin, sau đó thực hiện tìm kiếm khác cho Metallica nhưng thêm nó vào cùng danh sách kết quả như tìm kiếm trước đó.

Sự cố của tôi là khi người dùng nhấp vào liên kết tới bản ghi, sau đó chạm vào nút quay lại, quay lại kết quả tìm kiếm.
FireFox (7) giữ cho trang trông như khi tôi rời khỏi trang, hiển thị kết quả đầy đủ.
IE (7,8) và Chrome (15) mặt khác sẽ hiển thị trang vì nó là trước khi thêm bất kỳ kết quả tìm kiếm với AJAX, như thể nó không nhớ rằng tôi đã thêm dữ liệu vào nó.

Dưới đây là mã tôi sử dụng. Tôi đã cố gắng để thêm các location.hash = "test"; nhưng nó dường như không hoạt động.

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

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

Tôi không cần nút quay lại theo dõi các thay đổi trên trang tìm kiếm, như bước qua từng kết quả tìm kiếm khác nhau khi được thêm. Tôi chỉ muốn trình duyệt ghi nhớ kết quả tìm kiếm cuối cùng khi tôi nhấn nút quay lại.

SOLVED
Thay đổi để document.location.hash = "latest search" không thay đổi bất cứ điều gì. Tôi đã phải sử dụng localStorage như Amir chỉ ra.

này đi vào phần còn lại của mã 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); 
    } 
}); 

Answer 1

Bạn có một vài lựa chọn.

1. Sử dụng localstorage nhớ truy vấn cuối cùng
2. Sử dụng cookie (nhưng không)
3. Sử dụng băm như bạn đã cố gắng với document.location.hash = "last search" để cập nhật các url. Bạn sẽ xem xét băm một lần nữa và nếu nó được thiết lập sau đó làm ajax khác để điền dữ liệu. Nếu bạn đã thực hiện localstorage thì bạn chỉ có thể lưu trữ yêu cầu ajax cuối cùng.

Tôi sẽ đi với localstorage và giải pháp băm vì đó là những gì một số trang web làm. Bạn cũng có thể sao chép và dán một URL và nó sẽ chỉ tải cùng một truy vấn. Điều này là khá tốt đẹp và tôi sẽ nói rất dễ tiếp cận.

Tôi rất tò mò muốn biết tại sao nó không hoạt động. Cập nhật câu trả lời của bạn để chúng tôi có thể trợ giúp.

Answer 2

Tôi tin rằng bạn có thể sử dụng phần băm (sau ký hiệu #) để phân biệt cuộc gọi trước cuộc gọi và cuộc gọi sau ajax, theo cách đó nút quay lại sẽ đưa bạn đến phiên bản cuộc gọi sau ajax. Bạn có thể giải thích tại sao giải pháp này không phù hợp với bạn?

Trang này có thể giúp:

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

"bookmark, Linkable, và Type-In-Able

window.location.hash làm cho URL duy nhất, vì vậy người dùng có thể đánh dấu nó, liên kết đến nó và nhập trực tiếp vào trình duyệt của họ.hóa cửa sổ.onload đảm bảo dấu trang được sử dụng để đặt trạng thái. Bỏ phiếu hoặc IFrame đảm bảo điều này sẽ hoạt động ngay cả khi URL cơ sở (trước mã băm) giống nhau . "

Answer 3

Một giải pháp khác là sử dụng các sự kiện mà các trường INPUT được giữ nguyên trong khi sử dụng nút quay lại. Vì vậy, tôi làm như thế:

trang của tôi chứa một đầu vào ẩn như thế:

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

Một khi nội dung ajax được dynamicaly nạp, tôi nội dung sao lưu vào lĩnh vực tiềm ẩn của tôi trước khi hiển thị nó:

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

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

Và điều cuối cùng cần làm là kiểm tra giá trị trường ẩn khi tải trang. Nếu nó chứa một cái gì đó, bởi vì nút quay lại đã được sử dụng, vì vậy, chúng ta chỉ cần hiển thị nó.

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

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

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