사이드바 쿠키 관련
본문
사이드바를 오픈 시에, 페이지를 옮겨도 오픈되어 있는 상태가 유지되도록
JQUERY COOKIE 를 적용시키기 위해 이것저것 해도 적용이 안되는데
쿠키 적용할 수 있도록 도움주실분 계실까요??
<input type="checkbox" id="menuicon">
<ul>
<li>
<label for="menuicon">
<span></span><span></span><span></span>
</label>
</li>
<li>
<a href="#" class="search"><span class="icon"></span><span>상품검색</span></a>
</li>
<li>
<a href="#" class="today"><span class="icon"></span><span>최근본상품</span></a>
</li>
</ul>
<div class="sidebar">
내용 나오는 영역</div>
<style>
* {padding:0;margin:0;}
input[id="menuicon"] {display:none;}
input[id="menuicon"] + ul {display:block;position:fixed;right:0; top:50%;transform:translateY(-50%);transition:all .35s;text-align:right;}
input[id="menuicon"] + ul > li {display:block;width:50px;height:50px;border:1px solid #f1f1f1;position:relative;margin-top:-1px;}
input[id="menuicon"] + ul > li > a {display:block;width:auto;height:50px;overflow:hidden;transition:all .35s;}
input[id="menuicon"] + ul > li > label {display:block;cursor:pointer;width:auto;height:50px;background:#dadada;}
input[id="menuicon"] + ul > li:nth-child(1) label span {display:block;position:absolute;width:50%;height:3px;border-radius:30px;background:#333;transition:all .35s;}
input[id="menuicon"] + ul > li:nth-child(1) label span:nth-child(1) {top:30%;left:50%;transform:translateX(-50%);}
input[id="menuicon"] + ul > li:nth-child(1) label span:nth-child(2) {top:50%;left:50%;transform:translate(-50%,-50%);}
input[id="menuicon"] + ul > li:nth-child(1) label span:nth-child(3) {bottom:30%;left:50%;transform:translateX(-50%);}
input[id="menuicon"] + ul > li:nth-child(2) a .icon {background:url('./img/search.png') center center no-repeat;background-size:50%;display:inline-block;width:50px;height:50px;vertical-align:middle;}
input[id="menuicon"] + ul > li:nth-child(3) a .icon {background:url('./img/sand-clock.png') center center no-repeat;background-size:50%;display:inline-block;width:50px;height:50px;vertical-align:middle;}
input[id="menuicon"]:checked + ul {z-index:2;right:300px;}
input[id="menuicon"]:checked + ul > li:nth-child(1) label {z-index:2;right:0;}
input[id="menuicon"]:checked + ul > li:nth-child(1) label span:nth-child(1) {top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg);}
input[id="menuicon"]:checked + ul > li:nth-child(1) label span:nth-child(2) {opacity:0;}
input[id="menuicon"]:checked + ul > li:nth-child(1) label span:nth-child(3) {bottom:50%;left:50%;transform:translate(-50%,50%) rotate(-45deg);}
div[class="sidebar"] {width:300px;height:100%;background:#f5f5f5;position:fixed;top:0;right:-300px;z-index:1;transition:all .35s;}
input[id="menuicon"]:checked + ul + div {right:0;}
</style>
답변 1
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
function setCookie(cookie_name, value, days) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + days);
var cookie_value = escape(value) + ((days == null) ? '' : '; expires=' + exdate.toUTCString());
document.cookie = cookie_name + '=' + cookie_value;
}
function getCookie(cookie_name) {
var x, y;
var val = document.cookie.split(';');
for (var i = 0; i < val.length; i++) {
x = val[i].substr(0, val[i].indexOf('='));
y = val[i].substr(val[i].indexOf('=') + 1);
x = x.replace(/^\s+|\s+$/g, '');
if (x == cookie_name) {
return unescape(y);
}
}
}
$(document).ready(function() {
var cookieName = "sidebar";
$(".sidebar").click(function () {
var cookie = getCookie(cookieName);
if(typeof cookie == "undefined"){
setCookie(cookieName, "off", "1");
cookie = getCookie(cookieName);
alert(document.cookie);
}
if(cookie == "off"){
setCookie(cookieName, "on", "1");
}else{
setCookie(cookieName, "off", "1");
}
alert(cookie);
});
});
</script>
<div class="sidebar">
aaaaaaaaaa
</div>
참고:
https://webisfree.com/2015-02-04/[%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8]-%EC%BF%A0%ED%82%A4(cookie)-%EC%A0%80%EC%9E%A5-%EB%B0%8F-%EC%82%AD%EC%A0%9C-%EC%98%88%EC%A0%9C%EB%B3%B4%EA%B8%B0
