JavaScript를 사용하여 HTML 페이지 간에 변수 전달
P粉757432491
2023-08-21 22:08:28
<p>'페이지 1'과 '페이지 2'라는 두 개의 페이지가 있습니다. 1페이지에는 예를 들어 100이라는 값을 가진 텍스트 상자와 버튼이 있습니다. </p>
<p>버튼을 누른 후 JavaScript가 텍스트 상자의 값을 전역 변수에 저장하고 2페이지로 이동하도록 하고 싶습니다. "window.onload"를 사용하여 두 번째 JavaScript 함수를 사용하여 1페이지에 저장된 값을 표시하고 싶습니다. </p>
<p>이것은 내 JavaScript 코드입니다: </p>
<pre class="brush:php;toolbar:false;"><script type="text/javascript">
var 가격; //함수 외부에 선언됨 = 전역 변수?
함수 save_price(){
Alert("started_1"); //참고용으로만 사용하세요.
가격 = document.getElementById('the_id_of_the_textbox').value;
Alert(가격); //참고용으로만 사용하세요.
}</pre>
<pre class="brush:php;toolbar:false;"><script type="text/javascript">
함수 read_price(){
경고("시작_2");
알림(가격);
}</pre>
<p>"페이지 1"에는 보내기 버튼이 있습니다: </p>
<pre class="brush:php;toolbar:false;"><input class="button_send" id="button_send" type="submit" value="Submit_price" onclick="save_price();"/> ;</pre>
<p>JavaScript 기능이 실행되고 내 페이지 2로 올바르게 리디렉션됩니다. </p>
<p>그러나 두 번째 페이지에서는 </p>
<pre class="brush:php;toolbar:false;">window.onload=read_price();</pre>
<p>전역 변수 가격에 대해 항상 "정의되지 않은" 값을 얻습니다. </p>
<p>저는 이러한 전역 변수에 대해 많이 읽었습니다. 이 페이지의 예: 전역 변수에 문제가 있습니다.. 하지만 작동시킬 수 없습니다...</p>
<p>왜 이것이 작동하지 않나요? </p>
여기서 가장 좋은 옵션은 쿼리 문자열을 사용하여 값을 "보내는" 것입니다.
JavaScript를 사용하여 쿼리 문자열 값을 얻는 방법
이것이 단순한 학습 연습 이상의 것이라면 이 작업의 안전을 고려하는 것이 좋습니다.
전역 변수는 페이지가 다시 로드되면 삭제되므로 여기서는 도움이 되지 않습니다.
귀하의 코드를 읽지 않고 시나리오만
localStorage
를 사용하여 해결하겠습니다. 다음은 단순화하기 위해prompt()
를 사용하는 예입니다.1페이지:
으아악2페이지:
으아악쿠키를 사용할 수도 있지만 localStorage는 더 많은 공간을 허용하고 페이지가 요청될 때 쿠키를 서버로 다시 보내지 않습니다.