>웹 프론트엔드 >JS 튜토리얼 >페이지 새로 고침 후 JavaScript 변수를 유지하는 방법은 무엇입니까?

페이지 새로 고침 후 JavaScript 변수를 유지하는 방법은 무엇입니까?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-11-10 00:04:02858검색

How to Keep JavaScript Variables Alive After a Page Refresh?

페이지 새로 고침 후에도 JavaScript 변수가 어떻게 유지됩니까?

페이지를 새로 고친 후에도 JavaScript 변수의 값을 유지하는 기능은 일반적입니다. 웹 개발 요구 사항. 브라우저 저장 메커니즘을 사용하여 이를 달성하는 방법을 살펴보겠습니다.

브라우저 저장 이해

활용할 수 있는 두 가지 주요 브라우저 저장 메커니즘은 다음과 같습니다.

  • window.localStorage: 브라우저가 다시 시작되고 적용되는 영구 저장소 전체 웹사이트에.
  • window.sessionStorage: 브라우저 세션이 열려 있는 동안 지속되는 임시 저장소입니다.

변수 저장 및 검색

로컬 저장소에 변수를 설정하려면, 사용:

localStorage.setItem("variableName", value);

페이지 새로 고침 후 변수 값을 검색하려면:

var retrievedValue = localStorage.getItem("variableName");

sessionStorage는 동일한 패턴을 따르지만 브라우저 세션이 끝나면 데이터가 지워집니다.

추가 고려 사항

  • 문자열 값만 브라우저 저장소에 직접 저장할 수 있습니다. 더 복잡한 데이터 유형을 저장하려면 JSON.stringify()를 사용하세요.
  • 브라우저에 따라 크기 제한이 있습니다. 자세한 내용은 브라우저 문서를 확인하세요.
  • 사용자 정의 라이브러리를 사용하여 저장 메커니즘을 추상화하거나 기존 라이브러리를 사용하는 것이 좋습니다. 이는 스토리지 유형에 관계없이 데이터 처리를 단순화합니다.

리소스

  • [브라우저 스토리지 가이드](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage)
  • [localStorage](https://developer.mozi lla.org/en-US/docs/DOM/Storage#localStorage)
  • [JSON](https://developer.mozilla.org/en-US/docs/JSON)
  • [브라우저 스토리지 호환성](http://caniuse.com/namevalue-storage)

위 내용은 페이지 새로 고침 후 JavaScript 변수를 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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