웹 애플리케이션에서 페이지를 다시 로드할 때 변수를 어떻게 유지할 수 있습니까?

페이지 로드 간에 변수를 유지하는 방법

페이지를 다시 로드할 때마다 사용자 작업을 추적하는 것은 웹 애플리케이션의 사용자 경험을 향상시키는 데 중요합니다. 그러나 HTTP의 상태 비저장 특성으로 인해 이 작업은 어려울 수 있습니다.

시도 및 오류

양식 제출 이벤트를 캡처한 후 숨겨진 숨기기 해제 시도가 실패함 필드가 보고되었습니다. JavaScript 코드는 제출 상태를 저장하기 위해 전역 변수(클릭)를 사용했지만 페이지 새로 고침 시 해당 값을 유지하지 못했습니다.

해결책

이 문제를 극복하려면 , 구현할 수 있는 여러 가지 방법이 있습니다:

1. 쿼리 문자열

GET 메서드를 사용하여 양식을 제출하면 URL이 매개변수-값 쌍이 포함된 쿼리 문자열로 업데이트됩니다. 이를 통해 양식의 입력 필드를 특정 값으로 설정할 수 있습니다. 예를 들어 숨겨진 필드를 추가할 수 있습니다.

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

다음 페이지 로드 시 JavaScript를 사용하여 쿼리 문자열을 구문 분석하고 전달된 값을 확인할 수 있습니다.

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\[").replace(/[\]]/, "\]");
    var regex = new RegExp("[\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var clicked = getParameterByName('clicked');

2. 웹 저장소

HTML5에서는 페이지 로드 시 브라우저 내에서 데이터를 유지하기 위한 API를 제공하는 웹 저장소를 도입했습니다. sessionStorage와 localStorage의 두 가지 옵션을 제공합니다.

sessionStorage:

• 데이터는 현재 탐색 세션 동안에만 유지됩니다.
• 저장에 적합합니다. 클릭수와 같은 임시 데이터

버튼 클릭 시 sessionStorage를 설정하는 코드:

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

페이지 로드 시 sessionStorage가 설정되어 있는지 확인하는 코드:

var clicked = sessionStorage.getItem('clicked');

localStorage:

• 데이터 (사용자가 수동으로 지우지 않는 한) 무기한 지속됩니다.
• 단일 탐색 세션 이후에 데이터를 저장하는 데 유용합니다.

버튼 클릭 시 localStorage를 설정하는 코드:

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

페이지에 localStorage가 설정되어 있는지 확인하는 코드 로드:

var clicked = localStorage.getItem('clicked');

3. 쿠키

쿠키는 지속적인 데이터 저장을 위한 또 다른 메커니즘을 제공합니다. 웹 저장소와 달리 쿠키는 주로 서버 측 통신을 위해 설계되었지만 클라이언트 측 데이터 보존에도 사용될 수 있습니다.

jQuery는 쿠키 처리를 단순화합니다.

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

읽을 코드 페이지 로드 시 쿠키:

var clicked = $.cookie('clicked');

쿠키를 제거하려면 $.cookie('clicked', null).

4. window.name

다소 독특하기는 하지만 window.name 속성을 사용하여 페이지를 새로 고칠 때 데이터를 저장할 수 있습니다.

window.name = "my value";

문자열 또는 직렬화된 객체를 저장할 수 있습니다.

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

그러나 이 접근 방식에는 한계가 있습니다. 탭과 도메인 전반에 걸쳐 액세스할 수 있지만 동일한 탐색 세션 내에서만 액세스할 수 있습니다. 중요한 데이터를 유지하는 데는 일반적으로 권장되지 않습니다.

위 내용은 웹 애플리케이션에서 페이지를 다시 로드할 때 변수를 어떻게 유지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!