토글, 페이지 새로고침 전 상태 유지. (브라우저 쿠키 활용)
브라우저 쿠키를 활용해서, 토글등을 페이지 새로 고침후에도 직전 상태를 유지하는 설정입니다.
저는 토글에서만 활용중이고 제 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에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 5366 | 기타 |
nekoieye
|
1년 전 | 1122 | |
| 5365 | PHP | 1년 전 | 779 | ||
| 5364 | JavaScript | 1년 전 | 529 | ||
| 5363 | JavaScript | 1년 전 | 999 | ||
| 5362 | 1년 전 | 1234 | |||
| 5361 | JavaScript | 1년 전 | 1244 | ||
| 5360 |
그누보드이해하기
|
1년 전 | 777 | ||
| 5359 | 1년 전 | 1092 | |||
| 5358 | 1년 전 | 1098 | |||
| 5357 | 1년 전 | 813 | |||
| 5356 | 1년 전 | 369 | |||
| 5355 |
|
1년 전 | 588 | ||
| 5354 | 1년 전 | 1062 | |||
| 5353 |
|
1년 전 | 708 | ||
| 5352 |
|
1년 전 | 642 | ||
| 5351 | PHP | 1년 전 | 809 | ||
| 5350 | PHP | 1년 전 | 577 | ||
| 5349 | OS | 1년 전 | 649 | ||
| 5348 | 기타 | 1년 전 | 452 | ||
| 5347 | 기타 | 1년 전 | 635 | ||
| 5346 | 기타 | 1년 전 | 508 | ||
| 5345 | 기타 | 1년 전 | 401 | ||
| 5344 | JavaScript |
|
1년 전 | 432 | |
| 5343 | PHP |
|
1년 전 | 503 | |
| 5342 | jQuery | 1년 전 | 576 | ||
| 5341 | PHP |
|
1년 전 | 882 | |
| 5340 | Mobile |
슈퍼스타맨
|
1년 전 | 562 | |
| 5339 | 기타 |
|
1년 전 | 562 | |
| 5338 |
멀티트리플
|
2년 전 | 1300 | ||
| 5337 | 기타 |
슈퍼스타맨
|
2년 전 | 1794 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기