【建站系列教程】3.1、cookie介紹

cookie的應用場景

利用cookie解決博客開頭的兩個應用場景

寫在前面：大家好，我是熱愛編程的小澤。
【建站系列教程】是我的親身建站經歷寫給廣大建站同胞們的教學博客。
喜歡的話點個贊吧~ 評論區歡迎交流討論~

cookie是站長必會的一個知識，它在本地設置、用戶會話、用戶標識等等方面都有作用。我們先上幾個應用場景。

cookie的應用場景

1 小說網站的字體、顏色、背景顏色設置

我們知道，網頁每次刷新都會重新顯示一次文件。如果你正在某個小說網站閱讀小說，頁面的背景顏色默認是白色，你把它改成米黃色之後，每次刷新仍然變成白色。這樣是不是很苦惱？每次刷新都要設置一下。
所以，客戶就提出一個需求：解決每次刷新之後，頁面的初始顏色都變成我設置的顏色，而不是默認色。甚至，當我7天之後再打開這個網站，仍然是我設置的顏色。

cookie能實現。

2 隱藏url裏面的參數

  一般情況下，在登錄頁面登錄進入主頁後，url是這樣：http://localhost/index.php?id=123456&pw=123456 但是這樣很不安全啊，參數別人直接可以看到，所以就提出第二種解決方法。
  我們把id和pw的值放在一起加密傳輸，然後在服務器端解密，url是這樣：http://localhost/index.php?infor=awelivbu123457khbv 這樣稍微有點用了，但是隻要是能解密的明文，別人一定能破解。
  所以又提出了一個需求，我想讓url裏面不顯示參數。url這樣：http://localhost/index.php 那那些參數如何保存與傳遞呢？

cookie能實現。

cookie的通俗介紹

  Cookie是服務器發送到用戶瀏覽器並保存在本地的一小塊數據，它會在瀏覽器下次向同一服務器再發起請求時被攜帶併發送到服務器上。
  Cookie 主要用於以下三個方面：
  1、會話狀態管理（如用戶登錄狀態、購物車、遊戲分數或其它需要記錄的信息）
  2、個性化設置（如用戶自定義設置、主題等）
  3、瀏覽器行爲跟蹤（如跟蹤分析用戶行爲等）

【注】：

cookie保存在用戶的瀏覽器中。服務器端可以設置有效時間，超過時間即失效。
cookie在瀏覽器中的保存，是針對網站級別的。也就是，你在http://localhost/下不管哪個頁面設置的cookie，都保存在localhost下。即以站點爲單位保存。
如何查看瀏覽器中的cookie？以我的qq瀏覽器舉例。F12進入開發者工具–>Application–>cookie。如圖，是我csdn的截圖。

cookie的基本用法

js版本

基本滿足需要

function setCookie(key, value, iDay) {
	var oDate = new Date();
	oDate.setDate(oDate.getDate() + iDay);
	document.cookie = key + '=' + value + ';expires=' + oDate;

}
function removeCookie(key) {
	setCookie(key, '', -1);//這裏只需要把Cookie保質期退回一天便可以刪除
}
function getCookie(key) {
	var cookieArr = document.cookie.split('; ');
	for(var i = 0; i < cookieArr.length; i++) {
		var arr = cookieArr[i].split('=');
		if(arr[0] === key) {
			return arr[1];
		}
	}
	return false;
}

jQuery版本

jQuery也封裝了自己的jquery.cookie.min.js文件，需求少的話，建議用以上js版本，代碼比較少。

利用cookie解決博客開頭的兩個應用場景

1 小說網站的字體、顏色、背景顏色設置

解決邏輯：
1、剛開始，網站沒有cookie。刷新後，先檢測有無cookie，有cookie，則按照cookie的值去設置頁面的css；無cookie，則頁面的字體等等都是默認。
2、每次當用戶改變字體、顏色等等，都去更新一下cookie。

2 隱藏url裏面的參數

解決邏輯：
把用戶id和id與密碼的MD5加密存入cookie中，每次用戶執行有關數據庫的操作時，驗證用戶的token是否正確。

【建站系列教程】3.1、cookie介紹