JavaScript에서 페이지 로드 시 양식 데이터를 어떻게 보존할 수 있습니까?

페이지 로드 사이에 변수를 보존하는 방법

HTTP는 상태 비저장이므로 페이지 새로 고침 사이에 양식 제출 상태를 캡처하는 것이 어려울 수 있습니다. JavaScript만으로는 페이지 로드 간 지속적인 저장이 쉽게 이루어지지 않습니다.

쿼리 문자열

GET 메서드를 사용하여 양식을 제출하면 쿼리 문자열이 생성됩니다(?parameter=value ). 양식의 입력 필드를 특정 값으로 설정하면 쿼리 문자열을 활용할 수 있습니다. 예:

<form method="GET">
    <input type="hidden" name="clicked" value="true" />
    <input type="submit" />
</form>

양식 제출 시 클릭한 매개변수를 포함하도록 쿼리 문자열이 업데이트됩니다. 페이지가 다시 로드되면 쿼리 문자열을 확인하여 제출 버튼이 클릭되었는지 확인할 수 있습니다.

웹 저장소

HTML5는 웹 저장소를 제공하므로 데이터를 저장할 수 있습니다. 페이지 로드 전반에 걸쳐 브라우저에서 LocalStorage는 데이터를 무기한 저장하는 반면 SessionStorage는 현재 탐색 세션 동안에만 데이터를 유지합니다. 이러한 목적을 위해서는 SessionStorage가 적합합니다.

$('input[type="submit"][value="Search"]').click(function() {
    sessionStorage.setItem('clicked', 'true');
});

쿠키

쿠키는 클라이언트측에도 데이터를 저장할 수 있습니다. jQuery를 사용하면 쿠키를 쉽게 설정할 수 있습니다.

$('input[type="submit"][value="Search"]').click(function() {
    $.cookie('clicked', 'true', { expires: 1 }); // expires in 1 day
});

Window.name

해킹적인 접근 방식으로 window.name 속성에 데이터를 저장할 수 있습니다.

window.name = JSON.stringify({ clicked: true });

이 접근 방식은 현재 탭으로 제한되며 문자열만 저장합니다.

위 내용은 JavaScript에서 페이지 로드 시 양식 데이터를 어떻게 보존할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!