js使用cookie儲存網站背景顏色程式碼例項

admin發表於2017-04-15
JSCookie網站

使用cookie儲存背景顏色是比較常見的應用，比如在可以切換背景顏色的網頁，使用cookie儲存，可以防止重新整理重置。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<input type="button" value="紅">
<input type="button" value="藍">
<input type="button" value="綠">
<script type="text/javascript">
var cookie = {
  add: function(key, val, h) {
    var str = key + "=" + escape(val);
    if (h > 0) { //如果h為0的時候就是不設定過期時間，瀏覽器關閉的時候cookie自動刪除
      var data = new Date();
      var ms = h * 3600 * 1000;
      data.setTime(data.getTime() + ms); //設定了世界時間
      str += "; expires=" + data.toGMTString(); //根據世界時間，把 Date 物件轉換為字串
      document.cookie = str;
      alert("新增成功");
    }
  },
  get: function(key) {
    var arrStr = document.cookie.split("; ");
    for (var i = 0; i < arrStr.length; i++) {
      var temp = arrStr[i].split("=");
      if (temp[0] == key) {
        return unescape(temp[1]);
      }
    }
  },
  del: function(key) {
    var data = new Date();
    data.setTime(-10000);
    document.cookie = key + "=a; expires=" + data.toGMTString();
 
  },
  getAll: function() {
    var str = document.cookie;
    var arr = document.cookie.split(";")
    var valArr = []
    if (!str) {
      alert("沒有任何cookie");
    } else {
 
      for (var i = 0; i < arr.length; i++) {
        var temp = arr[i].split("=");
        valArr.push("key:" + temp[0] + ", val:" + unescape(temp[1]));
      }
      return valArr;
    }
  }
};
 
var btn = document.getElementsByTagName("input");
 
btn[0].onclick = function() {
  document.body.style.background = "red";
  var se = document.body.style.background;
  cookie.add("background", se, 24);
}
 
 
btn[1].onclick = function() {
  document.body.style.background = "blue";
  var se = document.body.style.background;
  cookie.add("background", se, 24);
}
 
btn[2].onclick = function() {
  document.body.style.background = "green";
  var se = document.body.style.background;
  cookie.add("background", se, 24);
}
if (cookie.get("background")) {
  document.body.style.background = cookie.get("background");
}    
</script>
</body>
 
</html>

相關文章