저장소를 사용하여 페이지를 다시 로드한 후 메뉴 및 페이지 상태를 유지하는 방법은 무엇입니까?

페이지를 다시 로드한 후 메뉴 상태 유지

페이지를 다시 로드한 후 메뉴 상태를 유지하려면 로컬 저장소를 활용할 수 있습니다. 방법은 다음과 같습니다.

1. 메뉴 상태 저장: JavaScript의 localStorage를 사용하여 클릭한 메뉴 링크의 번역된 위치를 포함하여 현재 메뉴 상태를 저장합니다.

<code class="javascript">// Assuming you have identified the clicked menu link as `clickedLink`
localStorage.setItem('menuState', clickedLink.id);</code>

2. 페이지 로드 시 메뉴 상태 검색: 후속 페이지 로드 시 localStorage에서 저장된 메뉴 상태를 검색합니다.

<code class="javascript">const menuState = localStorage.getItem('menuState');</code>

3. 메뉴 상태 복원: menuState에 지정된 메뉴 링크의 번역된 위치를 설정하여 메뉴 상태를 복원합니다.

<code class="javascript">if (menuState) {
  const clickedLink = document.getElementById(menuState);
  clickedLink.classList.add('clicked', 'hovered');
  // Adjust translation and other styles accordingly.
}</code>

4. 페이지 상태 유지: 현재 페이지도 유지하려면 localStorage에 페이지 번호를 저장하면 됩니다. 유사한 방식으로 검색하고 복원합니다.

<code class="javascript">// Assuming you have a variable `currentPage` to store the current page
localStorage.setItem('pageState', currentPage);

const pageState = localStorage.getItem('pageState');
if (pageState) {
  currentPage = pageState;
  // Adjust page content and navigation state accordingly.
}</code>

5. 메뉴 상태 지우기: 원하는 경우 localStorage 변수를 제거하여 메뉴 상태를 지울 수 있습니다. 이는 로그아웃하거나 웹사이트의 다른 섹션으로 이동하여 수행할 수 있습니다.

<code class="javascript">localStorage.removeItem('menuState');
localStorage.removeItem('pageState');</code>

저장 위치의 장단점

• 로컬 저장소:

  • 장점:

    • 브라우저 세션 전반에 걸쳐 지속됨
    • 사용이 간편함

  • 단점:

    • 페이지의 모든 스크립트에 액세스 가능
    • 저장 용량 제한

• 서버측 저장소:

  • 장점:

    • 로컬 저장소보다 안전함
    • 여러 기기에서 접속 가능

  • 단점:

    • 서버 설정 및 유지 관리 필요
    • 도입할 수 있음 페이지 로드 및 성능 지연

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