뒤로 버튼을 누를 때 추가된 데이터 기억

뒤로 버튼을 누를 때 추가된 데이터 기억

모든 검색 결과가 AJAX에서 페이지에 추가되는 검색 페이지가 있습니다.이렇게 하면 사용자가 예를 들어 Red Zeppelin을 검색한 다음 Metalica를 다시 검색하지만 이전 검색과 동일한 결과 목록에 추가할 수 있습니다.

문제는 사용자가 레코드에 대한 링크를 클릭한 다음 뒤로 버튼을 눌러 검색 결과로 돌아가는 것입니다.
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);
    }
});

몇 가지 옵션이 있습니다.

1. 로컬 저장소를 사용하여 마지막 쿼리 기억
2. 쿠키 사용(단, 사용하지 않음)
3. 사용한 대로 해시를 사용합니다.document.location.hash = "last search"URL을 갱신합니다.해시를 다시 보고 해시가 설정되어 있는 경우 다른 Ajax를 수행하여 데이터를 채웁니다.로컬 스토리지를 사용한 경우 마지막 Ajax 요청을 캐시할 수 있습니다.

로컬 스토리지와 해시 솔루션을 사용하는 웹 사이트도 있습니다.URL을 복사하여 붙여넣을 수도 있습니다.그러면 동일한 쿼리가 로드됩니다.이것은 꽤 멋지고 접근하기 쉽다고 말할 수 있다.

왜 안 됐는지 궁금하네요.답변을 업데이트하여 도움을 받으십시오.

또 다른 해결책은 뒤로 버튼을 사용하는 동안 입력 필드가 유지된다는 사실을 이용하는 것입니다.그래서 저는 그렇게 하고 있습니다.

내 페이지에는 다음과 같은 입력이 숨겨져 있습니다.

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

Ajax 콘텐츠가 동적으로 로드되면 콘텐츠를 표시하기 전에 숨김 필드에 백업합니다.

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 );
});

해시 섹션(# 기호 뒤에)을 사용하여 페이지 Ajax 전 콜과 Ajax 후 콜을 구분할 수 있습니다.그러면 back 버튼을 누르면 Post ajax 후 콜 버전으로 이동할 수 있습니다.이 솔루션이 왜 효과가 없었는지 자세히 설명해 주시겠습니까?

이 페이지는 다음을 지원합니다.

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

"Bookmarkable, Linkable 및 Type-In-Able"

window.location을 클릭합니다.해시는 URL을 고유하게 만들기 때문에 사용자는 URL을 북마크하고 링크하여 브라우저에 직접 입력할 수 있습니다.window.onload는 북마크를 사용하여 상태를 설정할 수 있도록 합니다.폴링 또는 IFrame을 사용하면 (해시 전) 기본 URL이 동일한 경우에도 이 기능이 작동합니다."

언급URL : https://stackoverflow.com/questions/7956563/remember-ajax-added-data-when-hitting-back-button