뒤로 버튼에 대한 웹 양식 컨텐츠를 어떻게 보존 할 수 있습니까?
-
05-07-2019 - |
문제
웹 양식이 제출되고 사용자를 다른 페이지로 데려 오면 사용자가 양식을 다시 제출하기 위해 백 버튼을 클릭하는 경우가 종종 있습니다 (양식은 내 경우에는 고급 검색입니다.)
사용자가 뒤로 클릭 할 때 사용자가 선택한 양식 옵션을 어떻게 안정적으로 보존 할 수 있습니까 (따라서 많은 양식 요소 중 하나만 변경하는 경우 양식을 다시 작성하여 처음부터 시작할 필요가 없습니까?)
세션 데이터 (쿠키 또는 서버 측)에 양식 옵션을 저장하는 경로를 따라 가야합니까? 아니면 브라우저가이를 처리 할 수있는 방법이 있습니까?
(환경은 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라고 말해야합니다.