JavaScript로 페이지를 수정할 때 URL 상태를 어떻게 보존할 수 있습니까?

JavaScript로 페이지를 수정하는 동안 URL 상태 유지

JavaScript에서 전체 페이지 새로고침을 트리거하지 않고 브라우저의 URL을 변경하는 방법은 다음과 같습니다. 브라우저의 기록 API 또는 조각 식별자를 활용합니다. 메서드.

History API 사용(최신 브라우저)

history API를 지원하는 브라우저의 경우, History.pushState를 사용하여 페이지 콘텐츠에 영향을 주지 않고 URL을 업데이트할 수 있습니다. :

history.pushState({}, '', 'new-url');

사용자가 뒤로 버튼을 클릭할 때 원래 URL을 복원하려면 다음을 사용하세요. History.popState:

window.addEventListener('popstate', function() {
  // Restore original URL and content
});

조각 식별자 방법 사용(레거시 브라우저)

히스토리 API를 지원하지 않는 브라우저에서는 창을 사용할 수 있습니다. URL 조각에 상태 정보를 저장하는 location.hash 속성:

window.location.hash = '#state-information';

상태를 처리하려면 변경, hashchange 이벤트 수신 또는 setInterval:

window.addEventListener('hashchange', function() {
  // Update page based on new hash
});

고려사항

• 프래그먼트 사용 시 요소 ID와의 충돌 방지 식별자 방법.
• 상태 정보가 URL.
• jQuery를 사용하는 경우 hashchange 플러그인을 사용하면 해시 기반 상태 관리를 단순화할 수 있습니다.

위 내용은 JavaScript로 페이지를 수정할 때 URL 상태를 어떻게 보존할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!