토글, 페이지 새로고침 전 상태 유지. (브라우저 쿠키 활용)
브라우저 쿠키를 활용해서, 토글등을 페이지 새로 고침후에도 직전 상태를 유지하는 설정입니다.
저는 토글에서만 활용중이고 제 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>
게시판 목록
개발자팁
질문은 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 5126 | PHP |
|
3년 전 | 1797 | |
| 5125 | PHP | 3년 전 | 1601 | ||
| 5124 | PHP | 3년 전 | 2117 | ||
| 5123 | OS | 3년 전 | 1399 | ||
| 5122 | OS | 3년 전 | 1314 | ||
| 5121 | OS | 3년 전 | 1419 | ||
| 5120 | OS | 3년 전 | 1296 | ||
| 5119 | PHP |
|
3년 전 | 1145 | |
| 5118 | PHP | 3년 전 | 1357 | ||
| 5117 | Mobile |
|
3년 전 | 1400 | |
| 5116 | PHP | 3년 전 | 2294 | ||
| 5115 | MySQL |
welcome
|
3년 전 | 2906 | |
| 5114 | OS | 3년 전 | 2003 | ||
| 5113 | JavaScript | 3년 전 | 1539 | ||
| 5112 | PHP | 3년 전 | 1559 | ||
| 5111 | 기타 |
|
3년 전 | 1299 | |
| 5110 | PHP | 3년 전 | 4545 | ||
| 5109 | PHP | 3년 전 | 1579 | ||
| 5108 | 기타 |
|
3년 전 | 12175 | |
| 5107 | 기타 |
|
3년 전 | 2409 | |
| 5106 | 기타 |
|
3년 전 | 6323 | |
| 5105 | 기타 |
|
3년 전 | 3695 | |
| 5104 | 기타 |
|
3년 전 | 1502 | |
| 5103 | JavaScript | 3년 전 | 1693 | ||
| 5102 | 기타 |
|
3년 전 | 1271 | |
| 5101 | 기타 |
|
3년 전 | 1466 | |
| 5100 | 기타 |
|
3년 전 | 1307 | |
| 5099 | 웹서버 | 3년 전 | 2173 | ||
| 5098 | PHP | 3년 전 | 1326 | ||
| 5097 | PHP |
|
3년 전 | 1986 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기