■ 프론트엔드 ■/JavaScript
selectbox와 쿠키 사용하기
serpiko
2016. 3. 23. 14:24
selectbox와 쿠키 사용하기 with jquery
셀렉트 박스에서 선택한 값으로 타겟의 옵션이 바뀌어지고 브라우저를 새로고침하거나 껐다가 켜도 쿠키로 유지하고 싶을때
setCookie와 getCookie 함수로 만들어서 구워내는 놈, 쿠끼꺼내는 놈 만들기
function setCookie(cName, cValue, expiredays) { var today = new Date(); today.setDate( today.getDate() + expiredays ); document.cookie = cName + "=" + escape( cValue ) + "; path=/; expires=" + today.toGMTString() + ";" } function getCookie() { // userid 쿠키에서 id 값을 가져온다. var cook = document.cookie + ";"; var key = 'hcn_total_dashbd'; var idx = cook.indexOf(key, 0); var val = ""; if(idx != -1) { cook = cook.substring(idx, cook.length); begin = cook.indexOf("=", 0) + 1; end = cook.indexOf(";", begin); val = unescape( cook.substring(begin, end) ); } // 가져온 쿠키값이 있으면 if(val!= "") { $("#interval_time").val( val ); }else{ $("#interval_time").val( 3 ); } }
실무 사용 코드
셀렉트 박스에서 선택한 값으로 타겟의 옵션이 바뀌어지고 브라우저를 새로고침하거나 껐다가 켜도 쿠키로 유지가 된다.
<html> <head> <meta charset='UTF-8' /> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> </head> <body> 시간선택하면 쿠키에 저장되는 기능 <select id="interval_time" name='interval_time'> <option value='3'>3초</option> <option value='10'>10초</option> <option value='30'>30초</option> <option value='60'>1분</option> <option value='300'>5분</option> </select> <p>롤링타임: <time>00</time></p> <script> var _rolling_interval = 10; $(document).ready(function(){ //////////////////////////////////////// function setCookie(cName, cValue, expiredays) { var today = new Date(); today.setDate( today.getDate() + expiredays ); document.cookie = cName + "=" + escape( cValue ) + "; path=/; expires=" + today.toGMTString() + ";" } function getCookie() { // userid 쿠키에서 id 값을 가져온다. var cook = document.cookie + ";"; var key = 'hcn_total_dashbd'; var idx = cook.indexOf(key, 0); var val = ""; if(idx != -1) { cook = cook.substring(idx, cook.length); begin = cook.indexOf("=", 0) + 1; end = cook.indexOf(";", begin); val = unescape( cook.substring(begin, end) ); } // 가져온 쿠키값이 있으면 if(val!= "") { $("#interval_time").val( val ); _rolling_interval = val; }else{ $("#interval_time").val( _rolling_interval ); } } getCookie(); $("#interval_time").change(function(e){ var _rolling_interval = $(this).val(); setCookie("hcn_total_dashbd", _rolling_interval, 7); $("time").text( _rolling_interval ); }); $("time").text( _rolling_interval ); //////////////////////////////////////// }); </script> </body> </html>
selectbox와 쿠키 사용하기 with jquery