최신 브라우저를 사용하여 페이지를 다시 로드할 때 메뉴 상태를 유지하는 방법은 무엇입니까?

페이지 새로고침 시 메뉴 상태 지속

문제 설명:

다음과 같은 여러 링크가 있는 메뉴가 있습니다.

• 마우스를 올리면 선택한 링크가 오른쪽으로 1.5em 이동합니다.
• 클릭하면 페이지를 다시 로드한 후에도 다른 링크가 나타날 때까지 클릭한 링크가 번역된 위치에 유지됩니다.

해결책: localStorage 활용

원하는 메뉴 동작을 달성하려면 HTML5 localStorage를 활용하여 선택한 링크의 상태를 저장하고 검색할 수 있습니다. 단계별 가이드는 다음과 같습니다.

1. localStorage 변수 생성: 선택한 링크의 ID 또는 클래스를 저장할 변수를 생성합니다. 예:

<code class="js">const selectedLinkId = localStorage.getItem('selectedLinkId');</code>

2. 페이지 로드 시 업데이트 메뉴: 페이지 로드 시 selectedLinkId 변수가 존재하는지 확인하세요. 그렇다면 해당 링크를 선택하고 번역된 위치를 적용합니다:

<code class="js">if (selectedLinkId) {
  $(`#${selectedLinkId}`).addClass('hovered').siblings().removeClass('hovered');
}</code>

3. 링크 클릭 시 메뉴 상태 저장: 링크를 클릭하면 localStorage 변수에 대한 클릭된 링크의 ID 또는 클래스:

<code class="js">$('#menuLinks').on('click', function() {
  localStorage.setItem('selectedLinkId', $(this).attr('id'));
});</code>

4. 페이지 변경 시 정리: 다른 페이지에서 메뉴 상태를 재설정하려는 경우 로드되면 pageshow 이벤트에 이벤트 리스너를 추가하고 localStorage 변수를 지웁니다.

<code class="js">window.addEventListener('pageshow', function() {
  localStorage.removeItem('selectedLinkId');
});</code>

저장소 위치의 장점과 단점:

• localStorage:

  • 장점: 세션과 브라우저 탭 전반에 걸쳐 지속되며 JavaScript로 액세스할 수 있습니다.
  • 단점 : 저장 용량이 제한되어 있어 사용자가 수동으로 데이터를 삭제할 수 있습니다.

• 서버측:

  • 장점: 무제한 저장 용량, 더 안전함.
  • 단점: 추가 설정이 필요하고 검색이 더 복잡함.

궁극적으로 가장 좋은 저장 위치는 특정 요구 사항에 따라 다릅니다. localStorage는 많은 양의 저장 공간이 필요하지 않은 영구 사용자 설정에 적합한 옵션입니다.

위 내용은 최신 브라우저를 사용하여 페이지를 다시 로드할 때 메뉴 상태를 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!