>웹 프론트엔드 >JS 튜토리얼 >페이지 새로 고침 후 JavaScript 변수 값을 어떻게 유지할 수 있습니까?

페이지 새로 고침 후 JavaScript 변수 값을 어떻게 유지할 수 있습니까?

DDD
DDD원래의
2024-11-17 12:28:01548검색

How Can I Keep JavaScript Variable Values After Page Refresh?

페이지 새로 고침 시 JavaScript 변수 값 유지

JavaScript에서 일반적으로 페이지를 새로 고치면 변수의 값이 손실됩니다. 이러한 제한을 극복하기 위해 window.localStorage 또는 window.sessionStorage 메소드를 활용할 수 있습니다.

window.localStorage

localStorage를 사용하면 지속되는 키-값 쌍을 저장할 수 있습니다. 브라우저가 다시 시작되는 것 이상입니다. 이는 단일 페이지가 아닌 전체 웹사이트에 적용됩니다.

새로 고침 후에도 유지되어야 하는 변수를 설정하려면 다음을 사용하세요.

var someVarName = "value";
localStorage.setItem("someVarKey", someVarName);

모든 페이지에서 지속되는 값을 검색하려면, 사용:

var someVarName = localStorage.getItem("someVarKey");

window.sessionStorage

sessionStorage는 localStorage와 유사하게 작동하지만 브라우저 탭이 열려 있는 동안에만 데이터를 유지합니다. 세션별 ​​정보를 임시로 저장하는 데 유용합니다.

sessionStorage를 사용하려면 위 예에서 localStorage를 sessionStorage로 바꾸세요.

고려 사항:

  • localStorage와 sessionStorage는 문자열만 저장할 수 있습니다. 문자열이 아닌 값을 저장하려면 JSON.stringify 및 JSON.parse를 사용하세요.
  • 다양한 데이터 유형을 쉽게 저장할 수 있도록 라이브러리를 사용하거나 고유한 추상화를 만드는 것이 좋습니다.
  • 이 방법은 사이트를 제공합니다. - 폭넓은 지속성. 혼란과 잠재적인 충돌을 피하기 위해 신중하게 사용하세요.

참조:

  • [DOM 저장소](https://developer.mozilla.org /en-US/docs/Web/Guide/API/DOM/Storage)
  • [localStorage](https://developer.mozilla.org/en-US/docs/DOM/Storage#localStorage)
  • [JSON](https://developer.mozilla.org/en-US/docs/JSON)
  • [브라우저 저장소 호환성](http://caniuse.com/namevalue-storage )
  • [HTML5 localStorage에 객체 저장](https://www.html5rocks.com/en/tutorials/storage/using-the-storage-api/)

위 내용은 페이지 새로 고침 후 JavaScript 변수 값을 어떻게 유지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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