這次項目做的很炸。。。無時無刻修改bug···有點煩躁迷亂
項目中遇到了一種情況：后一個頁面需要獲取前一個頁面的值，自己知道需要本地存儲，但是以前對本地存儲只是定義上的理解 沒有實際用過，然后決定自己在看一看哪幾種本地存儲整理一下。。。

cookie

生命期為只在設(shè)置的cookie過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉。 存放數(shù)據(jù)大小為4K左右 。有個數(shù)限制（各瀏覽器不同），一般為50個左右。與服務(wù)器端通信：每次都會攜帶在HTTP頭中，如果使用cookie保存過多數(shù)據(jù)會帶來性能問題。但Cookie需要程序員自己封裝，源生的Cookie接口不友好

SessionStorage（會話級別的本地存儲）

在Html5中增加了一個Js對象：sessionStorage；通過此對象可以直接操作存儲在瀏覽器中的會話級別的WebStorage。存儲在sessionStorage中的數(shù)據(jù)首先是Key-Value形式的，另外就是它跟瀏覽器當(dāng)前會話相關(guān)，僅在當(dāng)前會話下有效，關(guān)閉頁面或瀏覽器后被清除。跟未設(shè)置過期時間的Cookie類似。sessionStorage 的生命周期是在瀏覽器關(guān)閉前。也就是說，在整個瀏覽器未關(guān)閉前，其數(shù)據(jù)一直都是存在的。存放數(shù)據(jù)大小為一般為5MB,而且它僅在客戶端（即瀏覽器）中保存，不參與和服務(wù)器的通信。源生接口可以接受，亦可再次封裝來對Object和Array有更好的支持。

localStorage（永久本地存儲）

在最新的JS的API中增加了localStorage對象，以便于用戶存儲永久存儲的Web端的數(shù)據(jù)。而且數(shù)據(jù)不會隨著Http請求發(fā)送到后臺服務(wù)器，而且存儲數(shù)據(jù)的大小機(jī)會不用考慮，因為在HTML5的標(biāo)準(zhǔn)中要求瀏覽器至少要支持到4MB.所以，這完全是顛覆了Cookie的限制，為Web應(yīng)用在本地存儲復(fù)雜的用戶痕跡數(shù)據(jù)提供非常方便的技術(shù)支持。

SessionStorage和LocalStorage都屬于web storage,其功能卻比cookie強(qiáng)大的多。cookie的大小只有4Kb左右（瀏覽器不同，大小也不同），而web Storage的大小有5MB。其API提供的方法有以下幾種：

setItem (key, value) ——  保存數(shù)據(jù)，以鍵值對的方式儲存信息。
getItem (key) ——  獲取數(shù)據(jù)，將鍵值傳入，即可獲取到對應(yīng)的value值。
removeItem (key) ——  刪除單個數(shù)據(jù)，根據(jù)鍵值移除對應(yīng)的信息。
clear () ——  刪除所有的數(shù)據(jù)
key (index) —— 獲取某個索引的key

localStorage例子：

var storage = null;  
    if(window.localStorage){              //判斷瀏覽器是否支持localStorage  
       storage = window.localStorage;       
       storage.setItem("name", "Rick");    //調(diào)用setItem方法，存儲數(shù)據(jù)  
       alert(storage.getItem("name"));     //調(diào)用getItem方法，彈框顯示 name 為 Rick  
       storage.removeItem("name");     //調(diào)用removeItem方法，移除數(shù)據(jù)  
       alert(storage.getItem("name"));   //調(diào)用getItem方法，彈框顯示 name 為 null  
  
    }  

SessionStorage用法同上，不過區(qū)別在于 sessionStorage 在關(guān)閉頁面后即被清空，而 localStorage 則會一直保存。

Cookie、session和localStorage的區(qū)別

cookie的內(nèi)容主要包括：名字、值、過期時間、路徑和域。路徑與域一起構(gòu)成cookie的作用范圍。若不設(shè)置時間，則表示這個cookie的生命期為瀏覽器會話期間，關(guān)閉瀏覽器窗口，cookie就會消失。這種生命期為瀏覽器會話期的cookie被稱為會話cookie。
會話cookie一般不存儲在硬盤而是保存在內(nèi)存里，當(dāng)然這個行為并不是規(guī)范規(guī)定的。若設(shè)置了過期時間，瀏覽器就會把cookie保存到硬盤上，關(guān)閉后再打開瀏覽器這些cookie仍然有效直到超過設(shè)定的過期時間。對于保存在內(nèi)存里的cookie，不同的瀏覽器有不同的處理方式session機(jī)制。
當(dāng)程序需要為某個客戶端的請求創(chuàng)建一個session時，服務(wù)器首先檢查這個客戶端的請求里是否已包含了一個session標(biāo)識（稱為session id），如果已包含則說明以前已經(jīng)為此客戶端創(chuàng)建過session，服務(wù)器就按照session id把這個session檢索出來使用（檢索不到，會新建一個），如果客戶端請求不包含session id，則為客戶端創(chuàng)建一個session并且生成一個與此session相關(guān)聯(lián)的session id，session id的值應(yīng)該是一個既不會重復(fù)，又不容易被找到規(guī)律以仿造的字符串，這個session id將被在本次響應(yīng)中返回給客戶端保存。保存這個session id的方式可以采用cookie，這樣在交互過程中瀏覽器可以自動的按照規(guī)則把這個標(biāo)識發(fā)送給服務(wù)器。

cookie和session的區(qū)別：

1、cookie數(shù)據(jù)存放在客戶的瀏覽器上，session數(shù)據(jù)放在服務(wù)器上
2、cookie不是很安全，別人可以分析存放在本地的cookie并進(jìn)行cookie欺騙，考慮到安全應(yīng)當(dāng)使用session
3、session會在一定時間內(nèi)保存在服務(wù)器上，當(dāng)訪問增多，會比較占用你服務(wù)器的性能，考慮到減輕服務(wù)器性能方面，應(yīng)當(dāng)使用cookie
4、單個cookie保存的數(shù)據(jù)不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie
5、建議將登錄信息等重要信息存放為session，其他信息如果需要保留，可以放在cookie中
6、session保存在服務(wù)器，客戶端不知道其中的信心；cookie保存在客戶端，服務(wù)器能夠知道其中的信息
7、session中保存的是對象，cookie中保存的是字符串
8、session不能區(qū)分路徑，同一個用戶在訪問一個網(wǎng)站期間，所有的session在任何一個地方都可以訪問到，而cookie中如果設(shè)置了路徑參數(shù)，那么同一個網(wǎng)站中不同路徑下的cookie互相是訪問不到的*

web Storage和Cookie的區(qū)別

Web Storage的概念和cookie相似，區(qū)別是它是為了更大容量存儲設(shè)計的，cookie的大小是受限的，并且每次請求一個新的頁面的時候cookie都會被發(fā)送過去，這樣無形中浪費(fèi)了帶寬，另外cookie還需要指定作用域，不可跨域調(diào)用。
除此之外，web storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發(fā)者自己封裝setCookie，getCookie。
但是cookie也是不可或缺的，cookie的作用是與服務(wù)器進(jìn)行交互，作為http規(guī)范的一部分而存在的，而web Storage僅僅是為了在本地“存儲”數(shù)據(jù)而生
sessionStorage、localStorage、cookie都是在瀏覽器端存儲的數(shù)據(jù)，其中sessionStorage的概念很特別，引入了一個“瀏覽器窗口”的概念，sessionStorage是在同源的同窗口中，始終存在的數(shù)據(jù)，也就是說只要這個瀏覽器窗口沒有關(guān)閉，即使刷新頁面或進(jìn)入同源另一個頁面，數(shù)據(jù)仍然存在，關(guān)閉窗口后，sessionStorage就會被銷毀，同時“獨(dú)立”打開的不同窗口，即使是同一頁面，sessionStorage對象也是不同的

Web Storage帶來的好處：

1、減少網(wǎng)絡(luò)流量：一旦數(shù)據(jù)保存在本地之后，就可以避免再向服務(wù)器請求數(shù)據(jù)，因此減少不必要的數(shù)據(jù)請求，減少數(shù)

據(jù)在瀏覽器和服務(wù)器間不必要的來回傳遞
2、快速顯示數(shù)據(jù)：性能好，從本地讀數(shù)據(jù)比通過網(wǎng)絡(luò)從服務(wù)器上獲得數(shù)據(jù)快得多，本地數(shù)據(jù)可以及時獲得，再加上網(wǎng)

頁本身也可以有緩存，因此整個頁面和數(shù)據(jù)都在本地的話，可以立即顯示
3、臨時存儲：很多時候數(shù)據(jù)只需要在用戶瀏覽一組頁面期間使用，關(guān)閉窗口后數(shù)據(jù)就可以丟棄了，這種情況使用sessionStorage非常方便

瀏覽器本地存儲與服務(wù)器端存儲的區(qū)別

其實數(shù)據(jù)既可以在瀏覽器本地存儲，也可以在服務(wù)器端存儲
瀏覽器可以保存一些數(shù)據(jù)，需要的時候直接從本地存取，sessionStorage、localStorage和cookie都是由瀏覽器存儲在本地的數(shù)據(jù)
服務(wù)器端也可以保存所有用戶的所有數(shù)據(jù)，但需要的時候瀏覽器要向服務(wù)器請求數(shù)據(jù)。
1、服務(wù)器端可以保存用戶的持久數(shù)據(jù)，如數(shù)據(jù)庫和云存儲將用戶的大量數(shù)據(jù)保存在服務(wù)器端
2、服務(wù)器端也可以保存用戶的臨時會話數(shù)據(jù)，服務(wù)器端的session機(jī)制，如jsp的session對象，數(shù)據(jù)保存在服務(wù)器上，

實際上，服務(wù)器和瀏覽器之間僅需傳遞session id即可，服務(wù)器根據(jù)session id找到對應(yīng)用戶的session對象，會話數(shù)據(jù)僅在一段時間內(nèi)有效，這個時間就是server端設(shè)置的session有效期

服務(wù)器端保存所有的用戶的數(shù)據(jù)，所以服務(wù)器端的開銷較大，而瀏覽器端保存則把不同用戶需要的數(shù)據(jù)分別保存在用戶各自的瀏覽器中，瀏覽器端一般只用來存儲小數(shù)據(jù)，而非服務(wù)可以存儲大數(shù)據(jù)或小數(shù)據(jù)服務(wù)器存儲數(shù)據(jù)安全一些，瀏覽器只適合存儲一般數(shù)據(jù)

sessionStorage、localStorage和cookie的區(qū)別

共同點：都是保存在瀏覽器端、且同源的
區(qū)別：
1、cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務(wù)器間來回傳遞，而sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)送給服務(wù)器，僅在本地保存。cookie數(shù)據(jù)還有路徑（path）的概念，可以限制cookie只屬于某個路徑下
2、存儲大小限制也不同，cookie數(shù)據(jù)不能超過4K，同時因為每次http請求都會攜帶cookie、所以cookie只適合保存很小的數(shù)據(jù)，如會話標(biāo)識。sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，可以達(dá)到5M或更大
3、數(shù)據(jù)有效期不同，sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉之前有效；localStorage：始終有效，窗口或瀏覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)；cookie：只在設(shè)置的cookie過期時間之前有效，即使窗口關(guān)閉或瀏覽器關(guān)閉
4、作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的
5、web Storage支持事件通知機(jī)制，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者
6、web Storage的api接口使用更方便

sessionStorage與頁面js數(shù)據(jù)對象的區(qū)別

頁面中一般的js對象的生存期僅在當(dāng)前頁面有效，因此刷新頁面或轉(zhuǎn)到另一頁面這樣的重新加載頁面的情況，數(shù)據(jù)就不存在了
而sessionStorage只要同源的同窗口中，刷新頁面或進(jìn)入同源的不同頁面，數(shù)據(jù)始終存在，也就是說只要瀏覽器不關(guān)閉，數(shù)據(jù)仍然存在