>  기사  >  웹 프론트엔드  >  범위 제한이 있는 JavaScript의 HTML 페이지 간에 변수를 전달하는 방법은 무엇입니까?

범위 제한이 있는 JavaScript의 HTML 페이지 간에 변수를 전달하는 방법은 무엇입니까?

Patricia Arquette
Patricia Arquette원래의
2024-10-24 07:56:02799검색

How to Pass Variables Between HTML Pages in JavaScript with Scope Limitations?

HTML 페이지 간 JavaScript에서 변수 전달

한 HTML 페이지(1페이지)에서 다음 페이지로 변수를 전달하려고 할 때 문제가 발생합니다. JavaScript를 사용하는 또 다른 (2페이지) 전역 변수를 선언하려는 노력에도 불구하고 2페이지의 값은 정의되지 않은 상태로 남아 있습니다. 이 글은 JavaScript 변수의 한계를 탐색하고 대체 접근 방식을 제시하여 이 문제에 대한 해결책을 제공하는 것을 목표로 합니다.

이해 JavaScript 변수 범위

JavaScript 변수에는 액세스할 수 있는 코드 부분을 결정하는 특정 범위가 있습니다. 제공한 코드는 함수 외부에서 변수 가격을 선언하여 전역으로 만들려고 시도합니다. 그러나 JavaScript는 HTML 문서 시작 부분의 스크립트 태그 내에서 var 키워드를 사용하여 전역적으로 선언된 변수만 인식합니다.

페이지 간 통신을 위해 LocalStorage 사용

대신 전역 변수에 의존하는 경우 페이지 간 통신을 위한 보다 강력한 접근 방식은 LocalStorage를 사용하는 것입니다. LocalStorage를 사용하면 페이지를 새로 고치거나 브라우저를 닫아도 지속되는 키-값 쌍을 저장할 수 있습니다.

페이지 1 코드:

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

2페이지 코드:

<code class="html"><script type="text/javascript">
window.onload = function() {
   alert(localStorage.getItem("storedPrice"));
}
</script></code>

이 접근 방식은 입력된 값을 1페이지의 LocalStorage에 저장하고 페이지가 로드될 때 2페이지에서 검색합니다. LocalStorage는 최신 브라우저에서 지원되며 페이지 간 통신을 위한 안정적인 메커니즘을 제공합니다.

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.