總括：詳細講述Cookie仰坦、LocalStorge履植、SesstionStorge的區(qū)別和用法。
1. 各種存儲方案的簡單對比

Cookies：瀏覽器均支持悄晃，容量為4KB

UserData：僅IE支持玫霎，容量為64KB

Flash：100KB，非HTML原生，需要插件支持

Google Gears SQLite ：需要插件支持庶近，容量無限制

LocalStorage：HTML5翁脆，容量為5M

SesstionStorage：HTML5，容量為5M

globalStorage：Firefox獨有的鼻种，F(xiàn)irefox13開始就不再支持這個方法
UserData僅IE支持反番， Google Gears SQLite需要插件，F(xiàn)lash已經(jīng)伴隨著HTML5的出現(xiàn)漸漸退出了歷史舞臺叉钥，因此今天我們的主角只有他們三個：Cookie,LocalStorge,SesstionStorge;

2. Cookie
作為一個前端和Cookie打交道的次數(shù)肯定不會少了罢缸，Cookie算是比較古老的技術了，1993 年網(wǎng)景公司雇員 Lou Montulli 為了讓用戶在訪問某網(wǎng)站時沼侣，進一步提高訪問速度祖能，同時也為了進一步實現(xiàn)個人化網(wǎng)絡，發(fā)明了今天廣泛使用的 Cookie蛾洛。
2.1 Cookie的特點
我們先來看下Cookie的特點：
1）cookie的大小受限制养铸，cookie大小被限制在4KB，不能接受像大文件或郵件那樣的大數(shù)據(jù)轧膘。

2）只要有請求涉及cookie钞螟，cookie就要在服務器和瀏覽器之間來回傳送（這解釋為什么本地文件不能測試cookie）。而且cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要）谎碍，這也是Cookie不能太大的重要原因鳞滨。正統(tǒng)的cookie分發(fā)是通過擴展HTTP協(xié)議來實現(xiàn)的，服務器通過在HTTP的響應頭中加上一行特殊的指示以提示瀏覽器按照指示生成相應的cookie蟆淀。

3）用戶每請求一次服務器數(shù)據(jù)拯啦，cookie則會隨著這些請求發(fā)送到服務器，服務器腳本語言如PHP等能夠處理cookie發(fā)送的數(shù)據(jù)熔任，可以說是非常方便的褒链。當然前端也是可以生成Cookie的，用js對cookie的操作相當?shù)姆爆嵰商Γ瑸g覽器只提供document.cookie這樣一個對象甫匹，對cookie的賦值，獲取都比較麻煩惦费。而在PHP中兵迅，我們可以通過setcookie()來設置cookie，通過$_COOKIE這個超全局數(shù)組來獲取cookie薪贫。

cookie的內容主要包括：名字恍箭，值，過期時間后雷，路徑和域季惯。路徑與域一起構成cookie的作用范圍吠各。若不設置過期時間，則表示這個cookie的生命期為瀏覽器會話期間勉抓，關閉瀏覽器窗口贾漏，cookie就消失。這種生命期為瀏覽器會話期的cookie被稱為會話cookie藕筋。會話cookie一般不存儲在硬盤上而是保存在內存里纵散，當然這種行為并不是規(guī)范規(guī)定的。若設置了過期時間隐圾，瀏覽器就會把cookie保存到硬盤上伍掀，關閉后再次打開瀏覽器，這些cookie仍然有效直到超過設定的過期時間暇藏。存儲在硬盤上的cookie可以在不同的瀏覽器進程間共享蜜笤，比如兩個IE窗口。而對于保存在內存里的cookie盐碱，不同的瀏覽器有不同的處理方式把兔。

2.2 Session
說到Cookie就不能不說Session。Session機制瓮顽。session機制是一種服務器端的機制县好，服務器使用一種類似于散列表的結構（也可能就是使用散列表）來保存信息。當程序需要為某個客戶端的請求創(chuàng)建一個session時暖混，服務器首先檢查這個客戶端的請求里是否已包含了一個session標識（稱為session id）缕贡，如果已包含則說明以前已經(jīng)為此客戶端創(chuàng)建過session，服務器就按照session id把這個session檢索出來使用（檢索不到拣播，會新建一個）晾咪，如果客戶端請求不包含session id，則為此客戶端創(chuàng)建一個session并且生成一個與此session相關聯(lián)的session id贮配，session id的值應該是一個既不會重復禀酱，又不容易被找到規(guī)律以仿造的字符串，這個session id將被在本次響應中返回給客戶端保存牧嫉。
保存這個session id的方式可以采用cookie，這樣在交互過程中瀏覽器可以自動的按照規(guī)則把這個標識發(fā)送給服務器减途。一般這個cookie的名字都是類似于SEEESIONID酣藻。但cookie可以被人為的禁止，則必須有其他機制以便在cookie被禁止時仍然能夠把session id傳遞回服務器鳍置。經(jīng)常被使用的一種技術叫做URL重寫辽剧，就是把session id直接附加在URL路徑的后面。比如：http://damonare.cn?sessionid=123456
還有一種技術叫做表單隱藏字段税产。就是服務器會自動修改表單怕轿，添加一個隱藏字段偷崩，以便在表單提交時能夠把session id傳遞回服務器。比如：

<form name="testform" action="/xxx">
    <input type="hidden" name="sessionid" value="123456">
    <input type="text">
</form>

實際上這種技術可以簡單的用對action應用URL重寫來代替撞羽。
2.3 Cookie和Session簡單對比
Cookie和Session 的區(qū)別：
1）cookie數(shù)據(jù)存放在客戶的瀏覽器上，session數(shù)據(jù)放在服務器上。

2）cookie不是很安全汇陆，別人可以分析存放在本地的cookie并進行cookie欺騙沪哺，考慮到安全應當使用session。

3）session會在一定時間內保存在服務器上邻奠。當訪問增多笤喳，會比較占用你服務器的性能考慮到減輕服務器性能方面，應當使用cookie碌宴。

4）單個cookie保存的數(shù)據(jù)不能超過4K杀狡，很多瀏覽器都限制一個站點最多保存20個cookie。

5）所以建議：

將登陸信息等重要信息存放為SESSION

其他信息如果需要保留贰镣，可以放在cookie中

2.4 document.cookie的屬性
expires屬性
指定了coolie的生存期呜象，默認情況下coolie是暫時存在的，他們存儲的值只在瀏覽器會話期間存在八孝，當用戶推出瀏覽器后這些值也會丟失董朝，如果想讓cookie存在一段時間，就要為expires屬性設置為未來的一個過期日期「甚耍現(xiàn)在已經(jīng)被max-age屬性所取代子姜，max-age用秒來設置cookie的生存期。

path屬性
它指定與cookie關聯(lián)在一起的網(wǎng)頁楼入。在默認的情況下cookie會與創(chuàng)建它的網(wǎng)頁哥捕，該網(wǎng)頁處于同一目錄下的網(wǎng)頁以及與這個網(wǎng)頁所在目錄下的子目錄下的網(wǎng)頁關聯(lián)。

domain屬性
domain屬性可以使多個web服務器共享cookie嘉熊。domain屬性的默認值是創(chuàng)建cookie的網(wǎng)頁所在服務器的主機名遥赚。不能將一個cookie的域設置成服務器所在的域之外的域。例如讓位于order.damonare.cn的服務器能夠讀取catalog.damonare.cn設置的cookie值阐肤。如果catalog.damonare.cn的頁面創(chuàng)建的cookie把自己的path屬性設置為“/”凫佛，把domain屬性設置成“.damonare.cn”，那么所有位于catalog.damonare.cn的網(wǎng)頁和所有位于orlders.damonare.cn的網(wǎng)頁孕惜，以及位于damonare.cn域的其他服務器上的網(wǎng)頁都可以訪問這個cookie愧薛。

secure屬性
它是一個布爾值，指定在網(wǎng)絡上如何傳輸cookie衫画，默認是不安全的毫炉，通過一個普通的http連接傳輸

2.5 cookie實戰(zhàn)
這里我們使用javascript來寫一段cookie,借用w3cschool的demo:

function getCookie(c_name){
    if (document.cookie.length>0){
        c_start=document.cookie.indexOf(c_name + "=")
        if (c_start!=-1){
            c_start=c_start + c_name.length+1
            c_end=document.cookie.indexOf(";",c_start)
            if (c_end==-1) c_end=document.cookie.length
            return unescape(document.cookie.substring(c_start,c_end))
        }
    }
    return "";
}
 
function setCookie(c_name,value,expiredays){
    var exdate=new Date()
    exdate.setDate(exdate.getDate()+expiredays)
    document.cookie=c_name+ "=" +escape(value)+
            ((expiredays==null) ? "" : "; expires="+exdate.toUTCString())
}
function checkCookie(){
    username=getCookie('username')
    if(username!=null && username!=""){alert('Welcome again '+username+'!')}
    else{
        username=prompt('Please enter your name:',"")
        if (username!=null && username!=""){
            setCookie('username',username,355)
        }
    }
}

注意這里對Cookie的生存期進行了定義，也就是355天

3. localStorage
   這是一種持久化的存儲方式削罩，也就是說如果不手動清除瞄勾，數(shù)據(jù)就永遠不會過期费奸。 它也是采用Key – Value的方式存儲數(shù)據(jù)，底層數(shù)據(jù)接口是sqlite进陡，按域名將數(shù)據(jù)分別保存到對應數(shù)據(jù)庫文件里愿阐。它能保存更大的數(shù)據(jù)（IE8上是10MB，Chrome是5MB）四濒，同時保存的數(shù)據(jù)不會再發(fā)送給服務器换况，避免帶寬浪費。

3.1 localStorage的屬性方法
下表是localStorge的一些屬性和方法
屬性方法說明

localStorage.length
獲得storage中的個數(shù)

localStorage.key(n)
獲得storage中第n個元素對的鍵值（第一個元素是0）

localStorage.getItem(key)
獲取鍵值key對應的值

localStorage.key
獲取鍵值key對應的值

localStorage.setItem(key, value)
添加數(shù)據(jù)盗蟆，鍵值為key戈二，值為value

localStorage.removeItem(key)
移除鍵值為key的數(shù)據(jù)

localStorage.clear()
清除所有數(shù)據(jù)

3.2 localStorage的缺點
① localStorage大小限制在500萬字符左右，各個瀏覽器不一致

② localStorage在隱私模式下不可讀取

③ localStorage本質是在讀寫文件喳资，數(shù)據(jù)多的話會比較卡（firefox會一次性將數(shù)據(jù)導入內存觉吭，想想就覺得嚇人啊）

④ localStorage不能被爬蟲爬取仆邓，不要用它完全取代URL傳參

4. sessionStorage
   和服務器端使用的session類似鲜滩，是一種會話級別的緩存，關閉瀏覽器會數(shù)據(jù)會被清除节值。不過有點特別的是它的作用域是窗口級別的徙硅，也就是說不同窗口間的sessionStorage數(shù)據(jù)不能共享的。使用方法（和localStorage完全相同）：

屬性方法說明

sessionStorage.length
獲得storage中的個數(shù)

sessionStorage.key(n)
獲得storage中第n個元素對的鍵值（第一個元素是0）

sessionStorage.getItem(key)
獲取鍵值key對應的值

sessionStorage.key
獲取鍵值key對應的值

sessionStorage.setItem(key, value)
添加數(shù)據(jù)搞疗，鍵值為key嗓蘑，值為value

sessionStorage.removeItem(key)
移除鍵值為key的數(shù)據(jù)

sessionStorage.clear()
清除所有數(shù)據(jù)

5. sessionStorage和localStorage的區(qū)別
   sessionStorage用于本地存儲一個會話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當會話結束后數(shù)據(jù)也隨之銷毀匿乃。因此sessionStorage不是一種持久化的本地存儲桩皿，僅僅是會話級別的存儲。當用戶關閉瀏覽器窗口后幢炸，數(shù)據(jù)立馬會被刪除泄隔。

localStorage用于持久化的本地存儲，除非主動刪除數(shù)據(jù)宛徊，否則數(shù)據(jù)是永遠不會過期的佛嬉。第二天、第二周或下一年之后闸天，數(shù)據(jù)依然可用巷燥。

5.1 測試
sessionStorage:

if (sessionStorage.pagecount){
    sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}else{
      sessionStorage.pagecount=1;
}
console.log("Visits "+ sessionStorage.pagecount + " time(s).");

測試過程：我們在控制臺輸入上述代碼查看打印結果
控制臺首次輸入代碼：

if (localStorage.pagecount){
    localStorage.pagecount=Number(localStorage.pagecount) +1;
}else{
    localStorage.pagecount=1;
 }
console.log("Visits "+ localStorage.pagecount + " time(s).");

控制臺首次輸入代碼：

6. web Storage和cookie的區(qū)別
   Web Storage(localStorage和sessionStorage)的概念和cookie相似皿桑，區(qū)別是它是為了更大容量存儲設計的毫目。Cookie的大小是受限的，并且每次你請求一個新的頁面的時候Cookie都會被發(fā)送過去诲侮，這樣無形中浪費了帶寬镀虐，另外cookie還需要指定作用域，不可以跨域調用沟绪。
   除此之外刮便，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發(fā)者自己封裝setCookie绽慈，getCookie恨旱。
   但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互，作為HTTP規(guī)范的一部分而存在 坝疼，而Web Storage僅僅是為了在本地“存儲”數(shù)據(jù)而生
   后記
   博主盡可能思路清晰的理了一遍cookie搜贤，session，localStorage钝凶，sessionStorage之間的區(qū)別和聯(lián)系仪芒，希望可以幫到大家。
   參考文章：
   cookie 和session 的區(qū)別詳解（http://www.cnblogs.com/shiyangxt/archive/2008/10/07/1305506.html）