뒤로 버튼에 대한 웹 양식 컨텐츠를 어떻게 보존 할 수 있습니까?

StackOverflow https://stackoverflow.com/questions/247573

문제

웹 양식이 제출되고 사용자를 다른 페이지로 데려 오면 사용자가 양식을 다시 제출하기 위해 백 버튼을 클릭하는 경우가 종종 있습니다 (양식은 내 경우에는 고급 검색입니다.)

사용자가 뒤로 클릭 할 때 사용자가 선택한 양식 옵션을 어떻게 안정적으로 보존 할 수 있습니까 (따라서 많은 양식 요소 중 하나만 변경하는 경우 양식을 다시 작성하여 처음부터 시작할 필요가 없습니까?)

세션 데이터 (쿠키 또는 서버 측)에 양식 옵션을 저장하는 경로를 따라 가야합니까? 아니면 브라우저가이를 처리 할 수있는 방법이 있습니까?

(환경은 PHP/JavaScript입니다. 사이트는 IE6+ 및 Firefox2+에서 작동해야합니다)

도움이 되었습니까?

해결책

나는 그것을 세션에 넣었다.
그것은 가장 신뢰할 수 있고 그들이 "뒤로"가지 않더라도 여전히 검색 옵션이 있습니다. 쿠키에 넣는 것도 효과가 있지만 아주 작은 형태가 아니라면 권장되지 않습니다.

다른 팁

나는 당신이 브라우저의 자비에 있다고 믿습니다. 반격하면 브라우저는 컨텐츠에 대한 서버에 새 요청을하지 않으며 캐시를 사용합니다 (어쨌든 내가 본 거의 모든 브라우저에서). 따라서 서버 측면이 나옵니다.

결과 페이지의 OnOnload 이벤트 중에 검색 결과를 쿠키에 저장 한 다음 검색 페이지에서 JavaScript로 쿠키를 읽고 양식을 작성하는 것과 같은 복잡한 일을 할 수 있는지 궁금합니다. 그러나 이것은 추측입니다. , 그것이 작동하는지 모르겠습니다.

브라우저에 달려 있지만 대부분의 경우 아무것도 할 필요가 없습니다.

즉, Firefox 등은 이전 페이지의 양식의 내용을 행복하게 기억하고 다시 클릭 할 때 다시 표시합니다. -스크립트에서 전적으로 양식을 캐시하거나 구축합니다.

(세션에 물건을 넣는 것은 브라우저를 동일한 형태로 두 개의 탭을 열면 혼동 될 수 있습니다. 그런 일을 할 때 매우 조심하십시오.)

당신이 가진 문제는 브라우저가 캐시 된 페이지의 페이지를 반환하고 서버에 다시 요청하지 않을 것입니다. 즉, 세션을 사용하는 것은 관련이 없다는 것입니다.

그러나 AJAX를 사용하여 페이지의로드 이벤트에 이전에 제출 된 양식의 세부 사항을로드 할 수 있습니다.

기본적으로 게시물 후 서버에 어떤 식 으로든 (아마도 세션 변수에서) 저장해야합니다. 또한 폼 페이지에서 JavaScript를 설정하여로드에서 실행하여 AJAX 호출을 발행하여 서버에서 데이터를 가져 오기 위해 (예 : JSON 형식) 데이터와 함께 양식 필드를 프리안해야합니다.

예제 jQuery 코드 :

$( document ).ready( function() {
  $.getJSON(
    "/getformdata.php",
    function( data ) {
      $.each( data.items, function(i,item) {
        $( '#' + item.eid ).val( item.val );
      } );
    });
} );

귀하의 /getformdata.php는 다음과 같은 데이터를 반환 할 수 있습니다.

{
  'items': [
    {
      'eid': 'formfield1',
      'val': 'John',
    },
    {
      'eid': 'formfield2',
      'val': 'Doe',
    }
  ]
}

그리고 세션에 아직 저장되지 않은 경우 빈 배열을 반환 할 것입니다. 위의 코드는 거칠고 테스트되지 않았지만 기본 아이디어를 제공해야합니다.

참고 사항 : 현재 버전의 오페라 및 Firefox는 돌아갈 때 양식 필드 컨텐츠를 보존합니다. JS 코드가이를 덮어 쓰지 만 안전해야합니다.

또 다른 Ajaxy 옵션 (JavaScript가없는 사용자에게는 좋지 않음)은 JavaScript를 통해 양식을 제출 한 다음 확인 페이지를 이동하는 것입니다 (또는 버튼을 메시지로 교체하여 양식에 메시지를 표시). 그렇게하면 "백"가 없습니다.

제출하기 전에 값을 쿠키에 저장하지 않겠습니까? 타임 스탬프 또는 토큰을 포함하여 언제 작성되었는지 표시 할 수도 있습니다. 그런 다음 페이지가로드되면 쿠키의 데이터로 필드에 필드를 채워야하는지 여부를 결정하거나 새 검색이기 때문에 비워 두십시오.

JavaScript로 모든 것을 로컬로 수행 할 수도 있습니다. 따라서 검색 가치가있는 쿠키를 저장하고 Pageload에서 쿠키가 있는지 확인합니다. 이 같은:

$('#formSubmitButton').click( function() {
    var value = $('#searchbox').val();
    var days = 1;
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
    document.cookie = "searchbox="+value+expires+"; path=/";
});

$(document).ready( function() {
    var nameEQ = "searchbox=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) var valueC = c.substring(nameEQ.length,c.length);
   }
   $('#searchbox').val(valueC);
});

이것을 테스트하지는 않았지만 작동해야합니다. 이를 위해서는 jQuery가 필요합니다.

쿠키 기능은 다음과 같습니다. http://www.quirksmode.org/js/cookies.html

나는 Firefox와 IE가 기본적 으로이 동작을 가지고 있다고 BTW라고 말해야합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top