공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/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







저작자표시 비영리 동일조건

'■ 프론트엔드 ■ > JavaScript' 카테고리의 다른 글

js에서 Trim, Ltrim, Rtrim 확장하여 사용하기  (0) 2016.07.29
Object.length 메서드 확장하여 사용하기  (0) 2016.07.29
HTML Table을 엑셀로 내보내기 : Export to excel sheet on client side  (11) 2015.04.02
정규식  (1) 2015.02.05
변수에 함수를 할당  (0) 2014.05.09
댓글