울러리

토글, 페이지 새로고침 전 상태 유지. (브라우저 쿠키 활용)

· 2024-10-03 (목) 20:10:09 · 1650

브라우저 쿠키를 활용해서, 토글등을 페이지 새로 고침후에도 직전 상태를 유지하는 설정입니다.

저는 토글에서만 활용중이고 제 pc에서만 테스트해서, 다른 환경은 어떨지 확신할 수는 없습니다.

모달창, 토글, 스크립트 등에 활용할 수 있지 않을까 싶습니다.

 

 

<? 
// 쿠키 설정 함수   여기에 시간 단위로 입력설정 0.1은 6분 
$kkk[38] = "0.1";
?>

<script> 
        function setCookie(name, value, hours) {
const expires = new Date(Date.now() + <?=$kkk[38];?> * 3600 * 1000).toUTCString();
            document.cookie = `${name}=${value}; expires=${expires}; path=/`;
        }

        // 쿠키 읽기 함수
        function getCookie(name) {
            const cookieArr = document.cookie.split(';');
            for (let i = 0; i < cookieArr.length; i++) {
                const cookiePair = cookieArr[i].trim().split('=');
                if (cookiePair[0] === name) {
                    return cookiePair[1];
                }
            }
            return null;
        }

        // 페이지 로드 시 상태 복원
        window.addEventListener('load', function() {
            const isOpen = getCookie('boardState');
            const detailsElement = document.getElementById('board-details');
            detailsElement.open = (isOpen === 'true');
        });

// 상태 변경 시 쿠키 설정
document.addEventListener('DOMContentLoaded', function() {
    const detailsElement = document.getElementById('board-details');
    detailsElement.addEventListener('toggle', function() {
        setCookie('boardState', this.open, <?=$kkk[38];?>); // PHP에서 설정한 유지 시간 사용
    });
});
    </script>

<details  id="board-details">
 <summary>게시판 목록</summary><!--시간 쿠키설정함-->
내용테스트
</details>

 

|
댓글을 작성하시려면 로그인이 필요합니다.

개발자팁

5,403건

개발과 관련된 유용한 정보를 공유하세요. 질문은 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
MySQL 24-12-14 조회 1,774
기타 24-12-14 조회 1,941
JavaScript 24-12-13 조회 2,003
JavaScript 24-12-13 조회 1,580
PHP 24-12-13 조회 2,042
PHP 24-11-26 조회 2,267
기타 24-11-14 조회 2,400
기타 24-10-30 조회 2,313
PHP 24-10-11 조회 2,078
JavaScript 24-10-10 조회 1,250
JavaScript 24-09-26 조회 1,785
24-09-25 조회 2,278
JavaScript 24-09-07 조회 2,035
24-09-11 조회 1,488
24-09-19 조회 2,430
24-09-10 조회 1,872
24-08-19 조회 1,600
24-10-03 조회 1,651
24-08-07 조회 1,222
24-07-23 조회 1,919
24-07-08 조회 1,506
24-06-27 조회 1,409
PHP 24-08-23 조회 1,601
PHP 24-07-31 조회 1,347
OS 24-07-22 조회 1,755
기타 24-07-22 조회 1,188
기타 24-07-12 조회 1,403
기타 24-07-02 조회 1,553
기타 24-07-02 조회 1,083
JavaScript 24-06-30 조회 1,204