一、序言
最近真是挺忙的啊，導緻也挺久沒有時間來看看園中各位大神的文章，隻能感慨業務真尼瑪的多，是以在此寫下一篇文章來大話最近工作和學習上面的一點點收獲體會，希望大家能夠有所收獲，這篇文章雖然說是一篇大話的文章，但是在文章内部還是會提供提供一些代碼來于各位分享一下
二、問題探索
為什麼我會突發奇想發這篇文章呢，原因是因為在一次與上司的談話中，上司以為我對cookie很是了解，其實我對cookie也隻是一知半解，是以為了不辜負上司的期望，我去學習了一下cookie。由于本人在學習的過程中一直是貫徹着這樣的幾條信條：1、沒有經過實踐的技術不能算是你自己掌握的 2、技術要服務業務，是以在這個大環境的貫徹下，我在了解完了cookie的用法之後，我便嘗試着自己編寫一個簡單的cookie插件(與其說是插件，不如說是一個方法庫)，要實作的功能也是相當的簡單的，就是基本的增删查改這個幾個功能，其中的删除是一個外帶指定删除和全部删除的功能
首先這四個功能中，我們應該最先來實作的是新增的功能
//新增多個cookie
var setCookies=function(keys){
var code=0;
var status='';
var len=keys.length;
var key='';
var value='';
var paramStr="";
for(var i=0;i<len;i++){
for(var b in keys[i]){
key=b;
value=keys[i][b];
paramStr+=key+"="+value+';';
}
document.cookie=paramStr;
paramStr="";
code=2000;
status='success';
}
return {
code:code,
status:status
};
}; <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<script src="cookie.js"></script>
<script type="text/javascript">
var test=setCookies([{data:'1asd23',path:'/'},{asd:'123sdfasdf123',path:'/'}]);
//delCookies('','all');
//console.log(document.cookie);
//console.log(test.status);
</script>
</body>
</html> 說一說我這個cookie的存值設定，不是王婆賣瓜，自賣自誇，我這個的設計是采用對象數組的形式進行傳參的，每個對象代表的是一條cookie的參數，這樣就可以實作了多個cookie同時存取的功能， 但是也避免了像一些function采用的是指定參數位置，然後通過指定的位置進行擷取，這樣寫可以使使用者在使用的時候更加的靈活多樣。(我認為好的工具是要面向使用者的，即使對象是程式員這個群體，從使用者的可用性和易用性出發，才是一個好的工具的根本)。在編寫寫入cookie的操作的時候，基本上是沒有遇見什麼大的問題的，接下來的是查和改，查的原理是擷取所得有cookie然後比對裡面時候這個字段 ，但是這裡在開發的時候有一個問題也是要特别注意的
如果是出現下面的這種情況我們要謹慎處理
假設我們要比對‘a’，但是現在cookie裡面是這樣的兩條cookie，這個時候如果按照我們的這個思路顯然是行不通的
‘a’=1;
'zcvdsd'='a'; 是以告訴我們在編寫的時候要注意查找key和value的差別，以免發生錯誤
cookie存入的功能已經實作了，接下來就是要實作删除的功能我們先從全部key删除說起，這裡我采用的也是允許多個key傳入的方法……，廢話不多說，我們接下來就來看一看代碼和運作效果：
HTML代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<script src="cookie.js"></script>
<script type="text/javascript">
//var test=setCookies([{data:'1asd23',path:'/'},{asd:'123sdfasdf123',path:'/'}]);
delCookies('','all');
//console.log(document.cookie);
//console.log(test.status);
</script>
</body>
</html> JavaScript代碼：
//删除cookie
var delCookies=function(keys,set){
if(set=='all'){
//删除所有的cookie
console.log(document.cookie);
var cookies=document.cookie.match(/[^ =;]+(?=\=)/g);
if(cookies){
for(var i in cookies){
//console.log(cookies[i]);i
console.log(cookies[i]);
document.cookie=cookies[i]+'=0;expires=' + new Date(0).toUTCString();
//dconsole.log(new Date(0).toUTCString());
}
}else{
}
}else{
}
} 在firefox上面檢視結果如下（至于為什麼不能再chrome上面檢視，請翻閱我上篇文章 cookie學習指南）
這裡我們可以看到cookie是沒有被删除的，這裡我可以保證不是我的代碼上面有錯誤，大家請仔細思考一下為什麼，接着我再來揭曉一下。知道答案的一下内容請忽略，好了，相信看下面的内容是不知道答案的小夥伴。在cookie中不止是存在key和value的對應關系，還存在path、domain、secure這些字段，如果我們預設不設定domain的話，那麼domain指向的是目前的頁面，path預設為空，secure這個字段是用來做HTTPS傳輸的，但是cookie已經儲存在本地了，是以我認為這個屬性沒什麼卵用，為了更清楚的說明問題，我們假設下面的這個場景
假設有這個的兩個cookie
document.cookie="'a'=1;domain=test.com;path=../good/";
document.cookie="'a'=1;domain=test.com;path=../test/" 這兩個cookie的作用範圍分别是根目錄下面的good檔案夾和test檔案夾，但是如果你直接像這樣設定document.cookie='"a"=0;expires='+（new Date()-1).toGMTString;這樣設定雖然符合将cookie的時間設定為失效就是删除cookie的效果，但是這兩條cookie都是存在的，這時你是要告訴計算機你要删除哪一條cookie呢，是以這樣的傳參是不符合規則的，是以在在删除的時候我們應該把相應的domian、path參數附帶上。可以了，
回歸正題，我們本次要讨論的問題是為什麼目前沒有成熟的cookie插件，想一想一款成熟的插件應該具備什麼樣的特性呢，如果是從IO的角度上面來看的話，那麼I==less and simple O==more and complicated，但是如果是從上面的那種情況上來看，就是我們在删除cookie的時候還要存入domain，path這個屬性，這樣會對使用者造成很不友好的感覺，同時Path這個屬性還不能讓使用者随便定義，因為這個最後要轉換成為格林威時間字元串的形式才可以生效的，這樣顯然會使得使用者傳值有些困難，同時我認為增删查改是一個操作類型的控件的最基本的用法了，如果是連這種用法都困難的話，那麼還算什麼控件呢，目前市面上有一款叫jquery.cookie.js的插件，但是在删除的時候還是要自己附帶上domain和path，是以這款控件也是相當的不成熟
三、總結
在這篇文章中，我闡述了我為什麼認為現在沒有成熟的cookie控件，如果你覺得我說的有道理的話，請在下方給我一個贊。如果有地方是我說錯的，希望大家在評論中指出