一、序言
最近真是挺忙的啊，導致也挺久沒有時間來看看園中各位大神的文章，只能感慨業務真尼瑪的多，所以在此寫下一篇文章來大話最近工作和學習上面的一點點收獲體會，希望大家能夠有所收獲，這篇文章雖然說是一篇大話的文章，但是在文章內部還是會提供提供一些代碼來於各位分享一下
二、問題探索
為什么我會突發奇想發這篇文章呢，原因是因為在一次與領導的談話中，領導以為我對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控件，如果你覺得我說的有道理的話，請在下方給我一個贊。如果有地方是我說錯的，希望大家在評論中指出