특정 값을 가지고 페이지 이동하기
본문
현재 갤러리게시판에 제이쿼리를 이용해서
아이콘을 클릭하면 갤러리게시판 레이아웃이 한줄에 2개씩나오던게 한줄에 5개로나오고,
다시 아이콘을 클릭하면 한줄에 5개나오던게 2개씩나오도록 변하는 버튼을 만들었습니다.
문제는 갤러리게시판이 총 3개가있는데 모두 이 아이콘이 삽입되어있으며 페이지이동을하면
당연히 초기화상태로 페이지가 로드됩니다.
이부분을 아이콘을 클릭해둔상태(한줄에5개나오는상태)로 페이지이동을했을때 해당 레이아웃이
유지되었으면합니다.
하나의 변수를 만들어 클릭하면 해당변수값이 1로저장, 다시클릭하면 2로저장되는식으로하여
페이지를 이동했을때 해당변수값을 판별하여 아이콘의기능이 정해지도록 하고싶은데 어떻게해야할까요??
게시판 레이아웃부분
<!-- 게시판 목록 시작 { -->
<div id="bo_gall" class="wrap cont thumb_css">
<div class="edit_layout">
<p class="list_layout"><img src="/img/list_icon.png" alt="" /></p>
<p class="thumb_layout"><img src="/img/thumb_icon.png" alt="" /></p>
</div>
중략
</div>
<script type="text/javascript">
$(function() {
$(".list_layout").click(function() {
$(this).css("display","none");
$(".top_menu").css("display","block");
$(".left_menu").css("display","none");
$(".thumb_layout").css("display","block");
$("#bo_gall").removeClass("thumb_css");
$("#bo_gall").addClass("list_css");
});
$(".thumb_layout").click(function() {
$(this).css("display","none");
$(".top_menu").css("display","none");
$(".left_menu").css("display","block");
$(".list_layout").css("display","block");
$("#bo_gall").removeClass("list_css");
$("#bo_gall").addClass("thumb_css");
});
});
</script>
form을이용하거나 get방식 post방식을 이용하라고하는데 잘 모르겠어서...
자세히 설명부탁드립니다...
답변 4
비슷한 상황의 프로젝트가 있었는데 뒤로가기를 하면 이전 클릭한 내용으로 존재하기를 바라는 내용이 있어서 제이쿼리 쿠키를 이용한 기억이 있네요....
클릭시 클래스를 쿠키로 구워서 적용하면 될듯 합니다.
https://dullyshin.github.io/2019/09/10/WEB-CookiesMakeDel/
참고 하시면 될듯 합니다.
로컬 스토리지(localStorage)나 세션 스토리지(sessionStorage)를 변수와 연동하여 사용하세요.
예를 들어서 어떤 페이지에서 로컬 스토리지를 아래처럼 myNumber 으로 정의해 놓고
myNumber 은 아무 이름이나 줘도 됩니다.
<script>
localStorage.myNumber = 100;
</script>
아무 페이지에서나 localStorage.myNumber 를 호출하면
<script>
document.write(localStorage.myNumber);
</script>
그냥 100이 불러집니다. 이건 브라우저를 종료하거나 새로고침 해도 그 값이 남아 있습니다.
사용자의 저장공간에 기록되는 것이니까요.
그래서 적절하게 삭제를 시키는 로직이 필요합니다. 삭제 시키는 로직은 아래와 같습니다.
localStorage.removeItem("myNumber");
----------
세션 스토리지는 모든 것은 로컬 스토리지와 같지만 2가지가 다릅니다.
1. 브라우저를 종료하면 그 값이 삭제됩니다.
2. 세션 스토리지는 모든 페이지에서 일어나는 것이 아니라...
세션 스토리지가 정의된 원래의 페이지에서 a 태그나 location.href 나 window.open 이벤트로 열린 창이나 탭에서만 정보가 공유됩니다.
사용법은 로컬 스토리지 에서 사용된 localStorage 를 sessionStorage 로만 바꿔주면 로컬 스토리지와 사용법이 동일합니다.
<p class="list_layout"><a href="?layout=list"><img src="/img/list_icon.png" alt="" /></a></p>
<p class="thumb_layout"><a href="?layout=thumb"><img src="/img/thumb_icon.png" alt="" /></a></p>
이렇게 링크로 바꾸시고
<?php if($_GET['layout'] == "list") { ?>
여기에 list_layout 관련된 html 넣으시고
<?php } ?>
<?php if($_GET['layout'] == "thumb") { ?>
여기에 thumb_layout 관련된 html 넣으시고
<?php } ?>
이렇게 하시면 되지 않을까요?
