페이지를 다시 로드할 때 메뉴 상태를 유지하는 방법: 저장소 옵션 탐색

페이지를 다시 로드할 때 메뉴 상태 유지

목표는 페이지를 다시 로드할 때 메뉴 버튼의 확장된 상태를 유지하는 것입니다. 이를 달성하려면 localStorage를 사용하여 메뉴 상태를 저장하는 것이 좋습니다. 페이지 로드 시 localStorage 변수가 있는지 확인하고 해당 메뉴 항목을 이전 확장 상태로 복원합니다.

구현

jQuery Storage API 사용

1. jQuery Storage API 플러그인 포함:

<code class="html"><script src="https://github.com/julien-maurel/jQuery-Storage-API/blob/master/jquery.storageapi.js"></script></code>

2. localStorage 초기화:

<code class="javascript">$(function () {
    $.storage.init(); 
});</code>

3. 메뉴 상태 저장:

<code class="javascript">var menuState = {
    expandedItem: "..."
}
$.storage.set("menuState", menuState);</code>

4. 페이지 로드 시 메뉴 상태 복원:

<code class="javascript">$(function () {
    ...
    var menuState = $.storage.get("menuState");
    if (menuState) {
        var expandedItem = menuState.expandedItem;
        $("#" + expandedItem).addClass("clicked hovered");
    }
});</code>

저장 위치의 장단점

• localStorage: 브라우저별로 지속적이고 동일한 도메인에서 액세스할 수 있으며 페이지를 다시 로드해도 유지되며 사용자 기본 설정이나 설정을 저장하는 데 적합합니다.
• sessionStorage: 브라우저 탭별 임시, 탭 폐쇄 시 손실, 단일 탐색 세션 내에서 임시 데이터를 저장하는 데 적합합니다.

대체 저장 방법

• 쿠키: 서버측 저장소, 도메인별로 액세스 가능, 용량 제한.
• 데이터베이스: 서버측 저장소, 데이터베이스 설정 및 연결 필요, 적합 사용자별 데이터를 유지 관리합니다.

참고: 특정 저장 위치는 애플리케이션 요구 사항 및 성능 고려 사항에 따라 달라질 수 있습니다.

위 내용은 페이지를 다시 로드할 때 메뉴 상태를 유지하는 방법: 저장소 옵션 탐색의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!