JavaScript를 효과적으로 사용하여 HTML 페이지 간에 변수를 전달하는 방법은 무엇입니까?

한 HTML 페이지에서 다른 HTML 페이지로 JavaScript를 통해 변수 전달

문제:

두 HTML 페이지 간에 변수를 전달해야 합니다. JavaScript를 사용하는 HTML 페이지. 변수 값은 첫 번째 페이지의 텍스트 상자에 캡처되며 사용자가 버튼을 클릭한 후 두 번째 페이지에서 해당 값에 액세스하려고 합니다. 그러나 두 번째 페이지에서 변수를 검색하려고 할 때 "정의되지 않은" 값이 발생합니다.

해결책:

localStorage 사용:

신뢰할 수 없고 관리하기 어려울 수 있는 전역 변수를 사용하는 대신 localStorage를 활용하여 이 기능을 구현할 수 있습니다. localStorage는 앱이나 브라우저 탭을 닫은 후에도 브라우저에 로컬로 데이터를 저장할 수 있는 방법을 제공하는 브라우저 API입니다. 쿠키에 비해 저장 한도가 큽니다.

구현:

1. 1페이지(변수 저장):

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

2. 2페이지(변수 검색):

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

설명:

• 1페이지에서 localStorage.setItem("storageName", getInput)을 사용하여 텍스트 상자에 입력한 값을 localStorage의 StorageName 키에 저장합니다.
• On 2페이지에서는 localStorage.getItem("storageName")을 사용하여 StorageName 키에 저장된 값을 검색하고 이를 경고 상자에 표시합니다.

대체 접근 방식:

• 쿠키: 쿠키를 사용하여 변수를 전달할 수도 있지만 저장 한도가 더 작고 요청이 있을 때마다 서버로 다시 전송되므로 성능과 개인 정보 보호에 영향을 미칠 수 있습니다.
• 세션 저장소: 세션 저장소는 localStorage와 유사하지만 현재 세션 동안만 지속되며 사용자가 브라우저 탭을 닫으면 지워집니다. 특정 세션에 대한 데이터만 저장해야 하는 경우에 사용할 수 있습니다.

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