JavaScript에서 HTML 페이지 간에 데이터를 공유하는 방법: window.onload 및 localStorage를 사용하여 변수 전송

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

여러 HTML 페이지가 포함된 시나리오에서는 한 페이지에서 다른 페이지로 변수를 전송해야 하는 경우가 종종 발생합니다. . 이 문제를 해결하기 위해 이 기사에서는 페이지 간 데이터 공유를 위한 포괄적인 솔루션을 제공하는 window.onload 및 localStorage라는 두 가지 방법을 살펴보겠습니다.

배경

제공된 코드 전역 변수에 사용자 입력 값을 저장하고 검색하는 것을 목표로 save_price() 및 read_price()라는 두 가지 함수가 포함되어 있습니다. 그러나 2페이지에서 전역 변수 가격을 사용할 때 문제가 발생합니다. 여기서 JavaScript의 전역 범위가 부족하여 "정의되지 않음"을 반환합니다.

window.onload를 사용한 솔루션

window.onload를 사용할 때 어려운 점은 시도한 함수 호출이 올바르지 않다는 것입니다. 올바른 형식은 다음과 같습니다.

window.onload = function() {
  read_price();
};

이 솔루션은 기능적이지만 특정 제한 사항이 있습니다. 전역 변수는 특히 대규모 애플리케이션에서 유지 관리 및 코드 가독성에 문제를 일으킬 수 있습니다.

localStorage를 사용하는 대체 솔루션

localStorage는 데이터 전송에 대한 더 안전하고 효율적인 접근 방식을 제공합니다. 전역 변수가 필요 없는 페이지. 이 메커니즘을 사용하면 페이지 다시 로드 및 브라우저 세션 전반에 걸쳐 지속되는 키-값 쌍을 저장할 수 있습니다.

코드 구현

페이지 1:

window.onload = function() {
  var getInput = prompt("Enter a value: ");
  localStorage.setItem("value", getInput);
};

2페이지:

window.onload = function() {
  alert(localStorage.getItem("value"));
};

localStorage의 이점

• 영구 저장소: 브라우저를 닫았다가 다시 열어도 데이터에 액세스할 수 있습니다.
• 막대한 저장 용량: 쿠키와 달리 대용량 데이터를 저장할 수 있습니다.
• 서버 측 회피: 쿠키와 달리 요청이 있을 때마다 데이터가 서버로 다시 전송되지 않습니다.

결론

window.onload 및 localStorage는 페이지 간에 변수를 전송하는 방법을 제공하며, localStorage는 광범위한 이점과 사용 용이성으로 인해 선호되는 솔루션으로 떠오르고 있습니다. 개발자는 localStorage의 강력한 기능을 활용하여 페이지 전체에서 효율적으로 데이터를 공유하여 사용자 경험을 향상하고 개발 프로세스를 간소화할 수 있습니다.

위 내용은 JavaScript에서 HTML 페이지 간에 데이터를 공유하는 방법: window.onload 및 localStorage를 사용하여 변수 전송의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!