js cookie統計點選頁面的次數程式碼例項

antzone發表於2017-04-02

下面就是一段程式碼例項,它使用cookie實現對頁面點選次數的統計效果,重新整理頁面資料也會保留。

此程式碼雖然不一定具有直接應用的價值,但是可以進行改造擴充套件,需要的朋友可以做一下參考。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
<script type="text/javascript">
function addCookie(name,cookievalue,time) {
  if (name != "" && cookievalue != "" &&  time != "") {
    if (isNaN(time) == false){
      var expires = new Date();
      expires.setTime(expires.getTime() + time * 1000);
      document.cookie = name + '=' 
          + escape(cookievalue) + ';expires=' 
          + expires.toGMTString();
    }
  }
}
function getCookie(cookieName) {
  var cookieString = document.cookie;
  var start = cookieString.indexOf(cookieName + '=');
  if (start == -1)
    return null;
  start += cookieName.length + 1;
  var end = cookieString.indexOf(';', start);
  if (end == -1) return unescape(cookieString.substring(start));
  return unescape(cookieString.substring(start, end));
}
var html = document.getElementsByTagName("html")[0];
html.onclick = function(){
  var count = parseInt(getCookie('count'))+1;
  addCookie("count",count,"1000");
  document.getElementById("count").innerHTML = "點選"+getCookie('count')+"次!";
}
if (getCookie('count')){
  document.getElementById("count").innerHTML = "已經點選"+getCookie('count')+"次!";
}
else{
  document.getElementById("count").innerHTML = "尚未點選頁面";
  addCookie("count","0","1000");
}
</script>
</head>
<body>
<div id="count"></div>
</body>
</html>

上面的程式碼實現了我們的功能,但是必須在伺服器環境下才能演示效果,否則cookie無效。

相關文章