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

Question

'페이지 1'과 '페이지 2'라는 두 개의 페이지가 있습니다. 1페이지에는 예를 들어 100이라는 값을 가진 텍스트 상자와 버튼이 있습니다.

버튼을 누른 후 JavaScript가 텍스트 상자의 값을 전역 변수에 저장하고 2페이지로 이동하도록 하고 싶습니다. "window.onload"를 사용하여 두 번째 JavaScript 함수를 사용하여 1페이지에 저장된 값을 표시하고 싶습니다.

이것은 내 JavaScript 코드입니다:

<script type="text/javascript">

var 가격; //함수 외부에 선언됨 = 전역 변수?

함수 save_price(){

    Alert("started_1"); //참고용으로만 사용하세요.

    가격 = document.getElementById('the_id_of_the_textbox').value;

    Alert(가격); //참고용으로만 사용하세요.
}

<script type="text/javascript">

함수 read_price(){

    경고("시작_2");

    알림(가격);

}

"페이지 1"에는 보내기 버튼이 있습니다:

<input class="button_send" id="button_send" type="submit" value="Submit_price" onclick="save_price();"/> ;

JavaScript 기능이 실행되고 내 페이지 2로 올바르게 리디렉션됩니다.

그러나 두 번째 페이지에서는

window.onload=read_price();

전역 변수 가격에 대해 항상 "정의되지 않은" 값을 얻습니다.

저는 이러한 전역 변수에 대해 많이 읽었습니다. 이 페이지의 예: 전역 변수에 문제가 있습니다.. 하지만 작동시킬 수 없습니다...

왜 이것이 작동하지 않나요?

Answer 1

여기서 가장 좋은 옵션은 쿼리 문자열을 사용하여 값을 "보내는" 것입니다.

JavaScript를 사용하여 쿼리 문자열 값을 얻는 방법

• 그래서 페이지 1은 page2.html?someValue=ABC
로 리디렉션됩니다.
• 페이지 2는 쿼리 문자열, 특히 "someValue" 키를 읽을 수 있습니다.

이것이 단순한 학습 연습 이상의 것이라면 이 작업의 안전을 고려하는 것이 좋습니다.

전역 변수는 페이지가 다시 로드되면 삭제되므로 여기서는 도움이 되지 않습니다.

Answer 2

귀하의 코드를 읽지 않고 시나리오만 localStorage를 사용하여 해결하겠습니다. 다음은 단순화하기 위해 prompt()를 사용하는 예입니다.

1페이지:

으아악

2페이지:

으아악

쿠키를 사용할 수도 있지만 localStorage는 더 많은 공간을 허용하고 페이지가 요청될 때 쿠키를 서버로 다시 보내지 않습니다.