728x90
javascript를 이용해 웹사이트 방문자수를 나타낼 수 있는 코드를 작성해보자.
쿠키를 이용해서 하는 방법으로 구현해보자.
쿠키(Cookie)란?
- 사용자가 방문한 웹사이트에서 사용자의 브라우저에 전송하는 작은 텍스트 조각. 쿠키가 있으면 사이트에서
사용자의 방문에 관한 정보를 기억하여 다음번에 더 간편하게 사이트를 방문하고 유용하게 사이트 활용가능 함.
javascript 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script language="JavaScript">
expireDate = new Date // 현재의 날짜 객체를 생성
expireDate.setMonth(expireDate.getMonth()+3) // 현재 월에 3개월을 더함. 쿠키의 유효기간 설정.(현재~3개월)
hitCt = eval(cookieVal("pageHit")) // 방문 카운트 변수이며 cookieVal 함수를 실행.
hitCt++ // 방문 카운트 +1
document.cookie = "pageHit="+hitCt+";expires=" + expireDate.toGMTString() // 이곳에서 쿠키를 갱신.
function cookieVal(cookieName) { // cookieVal 함수를 선언함.
thisCookie = document.cookie.split("; ") // 쿠키의 문자열 구조가 '쿠키명=쿠키값; expires=유효기간' 이기 때문에 먼저 세미콜론(;)으로 나눔.(split)
for (i=0; i<thisCookie.length; i++) { // ; 으로 나눈 만큼 반복문을 실행. 여기서는 2번을 반복함.
if (cookieName == thisCookie[i].split("=")[0]) { // 먼저 thisCookie[i].split("=")[0]은 '쿠키명=쿠키값' 구조에서 =으로 나눈 배열의 첫번째 값을 지칭함(쿠키명).
return thisCookie[i].split("=")[1] // thisCookie[i].split("=")[1] 은 =으로 나눈 배열의 두번째 값.(쿠키값)
}
}
return 0
}
</script>
<h3 align=center>
<script language="javascript" type="text/javascript">
document.write("현재 홈페이지에 <font color=red>" + hitCt + "</font> 번째 방문자입니다!")
</script>
</h3>
</body>
</html>
실행결과
- 홈페이지 방문 할 때마다 쿠키에 저장되어 접속 카운트가 올라간다.
- 계속 반복하면 할 수록 방문숫자가 올라간다.
javascript 쿠키를 사용해 간단하게 방문자 접속 수를 확인할 수 있다.
'IT개발 > 웹개발' 카테고리의 다른 글
| 객체지향형과 절차지향형 차이 (0) | 2021.11.04 |
|---|---|
| Java : 클래스(Class) 객체지향 프로그래밍! (0) | 2021.11.01 |
| 자바 업데이트 버전 변경하는 방법 Java8 에서 Java11로! (0) | 2021.10.25 |
| html2canvas 사용법 : 캡처를 이미지로 다운로드 (0) | 2021.09.09 |
| 명언테스트 : MBTI테스트 성격테스트 만들기 (0) | 2021.08.17 |
