쿠키(cookie)

1. 쿠키

- 브라우저에서의 쿠키는 브라우저에 간단한 텍스트형태로 데이타를 저장 할 수 있는 수단

- 쿠키 저장시 유지시간을 설정가능

​

▼html

<!-- 쿠키 공통 함수가 저장된 외부파일 불러오기 -->
	<script type="text/javascript" src="cookie.js"></script>
	<script type="text/javascript">
		/*
			쿠키에 데이타 저장 하는 코드			
			document.cookie = "key=value; expires=유지시간(date); path=/;";
			
			setCookie, getCookie 함수는 
			모든 페이지에서 사용되는 공통 함수 임으로 외부파일로 만든다.
			(만든 파일 명 cookie.js)			
		*/
		
		//myName이라는 명칭으로 홍길동 값을 하루 유지 시키겠다.
		setCookie('myName', '홍길동', 1);
		setCookie('myAge', 20, 1);
		
		console.log(document.cookie, '저장된 쿠키값 확인');
						
		console.log(getCookie('myName'), '쿠키값 가지고 오기');
	</script>

 

▼js파일(cookie.js)

/**
 * 쿠키 저장 및 호출 함수
 * 
 * document.cookie = "key=value; expires=유지시간(date); path=/;";
 */

function setCookie(cname/*키*/, cvalue/*값*/, exdays/*유지 일*/) {
	const d = new Date(); //오늘 날짜 기준으로 날짜 정보 객체화
	//오늘 날짜 시간을 숫자형태로 가지고 오기 + 하루 기준으로 날짜 계산 후 매개변수값 곱하기
	//날짜 정보 객체화 된 정보로 계산된 날짜를 재갱신
	d.setTime(d.getTime() + (exdays*24*60*60*1000));
	//쿠키에 저장될 수 있는 날짜 문자열로 변수에 저장
	let expires = "expires="+ d.toUTCString();
	//쿠키에 저장 될 수 있는 포맷형태로 문자결합 연산자를 활용하여 연산 시켜 저장
 	document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname/*키*/) {
	//name 이라는 변수  key= 문자 결합을 하여 저장
	let name = cname + "=";
	//쿠키의 데이타 중 인코딩된 데이타를 디코딩하여 원본으로 복원
	//decodedCookie 변수에 쿠키에 저장된 문자열을 대입
	//예)myName=홍길동; myAge=20
	let decodedCookie = decodeURIComponent(document.cookie);
	/*
		split('문자열') -> 문자열 객체의 메서드 : 인수에 삽입된 문자열 기준으로 
		문자열을 쪼개어 배열로 변환
		예) ['myName=홍길동', ' myAge=20']
	*/
	let ca = decodedCookie.split(';');
	//배열로 변환된 쿠키값을 반복문을 통해 요소에 접근
	for(let i = 0; i <ca.length; i++) {
		let c = ca[i]; //요소에 접근하여 c변수에 대입
		while (c.charAt(0) == ' ') { //요소의 첫번재가 공백이라면 
			c = c.substring(1); //첫번째 공백을 없애기
		}
		//c 변수에는 'myName=홍길동', 'myAge=20';
		
		//요소의 값 중 매개변수로 넘어온 값의 처음 문자열이 같다면
		//c -> myName=홍길동
		//name -> myName=
		//c.indexOf(name) -> c 요소에 myName= 포함되어 있다면 index값 반환
		if (c.indexOf(name) == 0) {
			//name -> myName= > 크기
			//c -> myName=홍길동 => 크키
			//substring 메서드를 통해 결괏값 '홍길동'
			return c.substring(name.length, c.length);
		}
	}
	return "";
}

▼결과확인