十分鐘了解cookie，成為大神不是夢

一、首先我們了解什麼是http協議和cookie。

傳輸協議：http協議：超文字傳輸協議，傳輸html，網頁，網頁傳輸協議，記不住狀態的協議。

傳輸的規則：雙方要進行資訊的傳輸時，要遵守的規定或約定。大致分為三步：

1、建立連線通道

2、相互通訊

3、關閉通道。

http：安全性不高

https：加密傳輸協議

二、會話跟蹤技術cookie：跟蹤每一次的連線，記錄連線產生的資訊，下次連線，跟著一起傳送過去

cookie會隨著http協議，發往伺服器，其實cookie自身，是一種本地儲存。

2.1 特點：

1.只能存字元，文字；

2.不允許跨域（誰存的，誰用）；

3.時效性，缺省會話級，關閉瀏覽器，可以刪除；

4.數量（50左右）和大小（4k）限制。

2.2 金鑰：加密的賬號或密碼

加密(admin123)

md5token：令牌，暗號

2.3 安全問題：cookie中所有的內容，因為都是存在本地的文字，所以都是明文，只要能看到你的本地，就有可能看到你的cookie，所以在專案中千萬不要在cookie中直接存賬號密碼，如果可以避免安全問題，或者是個人電腦就可以存。

2.4 cookie如何使用：

cookie自身是document物件的乙個屬性

使用：document.cookie

2.5 cookie的規則：要設定的cookie

document.cookie = 要設定的cookie

1.必須是字元：""

2.字元內的格式要求：名=值，如："user=admin"

3.一條**只能設定一條cookie

4.設定cookie時，可以配置資訊要求

有效期："expires=日期物件"

路徑："path=/page"

5.cookie的內容和每個配置資訊之間用：";"連線

2.6 設定cookie的語法：

預設cookie

document.cookie = "user=admin";

設定具有有效期的cookie（3天之後）
var d = new date();
d.getdate();獲取當前當月天數
d.setdate(d.getdate() + 3); //獲取指定日期
document.cookie = "abc=123;expires="+d;
設定具有路徑的cookie（3天之後）
document.cookie = "abc=123;path=/page";
設定具有路徑和有效期的cookie（3天之後）
var d = new date();
d.setdate(d.getdate() + 3);
document.cookie = "abc=123;path=/page;expires="+d;

2.7 刪除cookie：通過有效期，讓這個cookie過期，怎麼能過期？當前設定曾經的日期。

查cookie：

var str = document.cookie

2.8 cookie工作場景：

cookie自身其實對工作環境沒有要求，但是cookie會隨著http發往伺服器，使用cookie的時候，是不需要記錄客戶端和伺服器之間的資訊。客戶端是瀏覽器，伺服器是本地伺服器，所以導致，cookie最好也在伺服器環境中使用。

三、cookie的簡單封裝：

function setcookie(key,val,ops)
// // 
// // 處理的是為undefined時
ops = ops || {};
// 處理有效期
let e = "";
if(ops.expires)
// 處理路徑
// let p = "";
// if(ops.path)
let p = ops.path ? ";path="+ops.path : "";
document.cookie = `$=$$$`;
}

例如下面這個案例：先建立幾個cookie，儲存後，我們把這幾個cookie注釋掉，看結果：

可以發現我們之前寫的cookie還在，而且重新整理不影響。

function getcookie(key));
function removecookie(key,ops);
// 2.ops是物件了，無論如何得有個expires的屬性為-1
ops.expires = -1;
// 3.將處理好的ops，給setcookie
setcookie(key,"suibianxie,danshibunengshenglue",ops);
}

十分鐘了解cookie，成為大神不是夢

課間十分鐘

十分鐘的代價

十分鐘的悲劇

十分鐘了解cookie，成為大神不是夢

課間十分鐘

十分鐘的代價

十分鐘的悲劇

相關推薦