JavaScript를 사용하여 HTML 페이지 간에 변수를 안전하게 전달하는 방법은 무엇입니까?

JavaScript를 사용하여 HTML 페이지 간 변수 전달

웹 개발에서는 두 HTML 페이지 간에 데이터를 전송해야 하는 경우가 많습니다. 일반적인 접근 방식 중 하나는 JavaScript를 사용하여 전역 변수에 데이터를 저장하고 두 번째 페이지에서 검색하는 것입니다. 그러나 전역 변수가 제대로 선언되거나 액세스되지 않으면 이 방법에서 문제가 발생할 수 있습니다.

다음 시나리오를 고려하세요.

• "페이지 1"과 "페이지"라는 두 페이지가 있습니다. 2".
• 1페이지의 텍스트 상자에는 값(예: 100)이 포함됩니다.
• 버튼을 클릭하면 JavaScript는 텍스트 상자 값을 전역 변수에 저장하고 2페이지로 리디렉션합니다.
• 2페이지에서 onload 함수는 1페이지에 저장된 값을 검색하고 표시하려고 시도합니다.

그러나 onload 함수는 전역 변수에 대해 항상 "정의되지 않음"을 반환합니다.

로컬 저장소를 사용한 솔루션

이 문제를 해결하기 위한 대안은 localStorage를 활용하는 것입니다. 로컬 저장소는 데이터를 저장하고 검색하는 보다 안정적이고 안전한 방법을 제공합니다.

• 1페이지:

  다음을 사용하여 텍스트 상자 값을 localStorage에 저장합니다. 다음과 같이 setItem() 메서드를 사용합니다.

  <code class="javascript">window.onload = function() {
    var getInput = prompt("Hey type something here: ");
    localStorage.setItem("storageName", getInput);
  }</code>

• 2페이지:

  getItem( ) 메서드를 사용하고 아래와 같이 Alert()를 사용하여 표시합니다.

  <code class="javascript">window.onload = function() {
    alert(localStorage.getItem("storageName"));
  }</code>

localStorage를 사용하면 서로 다른 HTML 페이지 간에 데이터의 일관된 저장 및 검색을 보장할 수 있습니다. 이 접근 방식은 안정적이고 효율적입니다.

위 내용은 JavaScript를 사용하여 HTML 페이지 간에 변수를 안전하게 전달하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!