這次項(xiàng)目做的很炸拳氢。缩搅。。無(wú)時(shí)無(wú)刻修改bug···有點(diǎn)煩躁迷亂
項(xiàng)目中遇到了一種情況：后一個(gè)頁(yè)面需要獲取前一個(gè)頁(yè)面的值猖腕，自己知道需要本地存儲(chǔ)拆祈，但是以前對(duì)本地存儲(chǔ)只是定義上的理解 沒(méi)有實(shí)際用過(guò)，然后決定自己在看一看哪幾種本地存儲(chǔ)整理一下谈息。缘屹。。

cookie

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

SessionStorage（會(huì)話級(jí)別的本地存儲(chǔ)）

在Html5中增加了一個(gè)Js對(duì)象：sessionStorage；通過(guò)此對(duì)象可以直接操作存儲(chǔ)在瀏覽器中的會(huì)話級(jí)別的WebStorage桨吊。存儲(chǔ)在sessionStorage中的數(shù)據(jù)首先是Key-Value形式的威根，另外就是它跟瀏覽器當(dāng)前會(huì)話相關(guān)凤巨，僅在當(dāng)前會(huì)話下有效，關(guān)閉頁(yè)面或?yàn)g覽器后被清除洛搀。跟未設(shè)置過(guò)期時(shí)間的Cookie類似敢茁。sessionStorage 的生命周期是在瀏覽器關(guān)閉前。也就是說(shuō)留美，在整個(gè)瀏覽器未關(guān)閉前彰檬，其數(shù)據(jù)一直都是存在的。存放數(shù)據(jù)大小為一般為5MB,而且它僅在客戶端（即瀏覽器）中保存谎砾，不參與和服務(wù)器的通信逢倍。源生接口可以接受，亦可再次封裝來(lái)對(duì)Object和Array有更好的支持景图。

localStorage（永久本地存儲(chǔ)）

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

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

setItem (key, value) ——  保存數(shù)據(jù)闰蛔，以鍵值對(duì)的方式儲(chǔ)存信息。
getItem (key) ——  獲取數(shù)據(jù)图柏，將鍵值傳入序六，即可獲取到對(duì)應(yīng)的value值。
removeItem (key) ——  刪除單個(gè)數(shù)據(jù)蚤吹，根據(jù)鍵值移除對(duì)應(yīng)的信息例诀。
clear () ——  刪除所有的數(shù)據(jù)
key (index) —— 獲取某個(gè)索引的key

localStorage例子：

var storage = null;  
    if(window.localStorage){              //判斷瀏覽器是否支持localStorage  
       storage = window.localStorage;       
       storage.setItem("name", "Rick");    //調(diào)用setItem方法，存儲(chǔ)數(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用法同上二驰，不過(guò)區(qū)別在于 sessionStorage 在關(guān)閉頁(yè)面后即被清空扔罪，而 localStorage 則會(huì)一直保存。

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

cookie的內(nèi)容主要包括：名字矿酵、值唬复、過(guò)期時(shí)間、路徑和域全肮。路徑與域一起構(gòu)成cookie的作用范圍盅抚。若不設(shè)置時(shí)間，則表示這個(gè)cookie的生命期為瀏覽器會(huì)話期間倔矾，關(guān)閉瀏覽器窗口妄均，cookie就會(huì)消失。這種生命期為瀏覽器會(huì)話期的cookie被稱為會(huì)話cookie哪自。
會(huì)話cookie一般不存儲(chǔ)在硬盤而是保存在內(nèi)存里丰包，當(dāng)然這個(gè)行為并不是規(guī)范規(guī)定的。若設(shè)置了過(guò)期時(shí)間壤巷，瀏覽器就會(huì)把cookie保存到硬盤上邑彪，關(guān)閉后再打開(kāi)瀏覽器這些cookie仍然有效直到超過(guò)設(shè)定的過(guò)期時(shí)間。對(duì)于保存在內(nèi)存里的cookie胧华，不同的瀏覽器有不同的處理方式session機(jī)制寄症。
當(dāng)程序需要為某個(gè)客戶端的請(qǐng)求創(chuàng)建一個(gè)session時(shí)，服務(wù)器首先檢查這個(gè)客戶端的請(qǐng)求里是否已包含了一個(gè)session標(biāo)識(shí)（稱為session id）矩动，如果已包含則說(shuō)明以前已經(jīng)為此客戶端創(chuàng)建過(guò)session有巧，服務(wù)器就按照session id把這個(gè)session檢索出來(lái)使用（檢索不到，會(huì)新建一個(gè)）悲没，如果客戶端請(qǐng)求不包含session id篮迎，則為客戶端創(chuàng)建一個(gè)session并且生成一個(gè)與此session相關(guān)聯(lián)的session id，session id的值應(yīng)該是一個(gè)既不會(huì)重復(fù)示姿，又不容易被找到規(guī)律以仿造的字符串甜橱，這個(gè)session id將被在本次響應(yīng)中返回給客戶端保存。保存這個(gè)session id的方式可以采用cookie栈戳，這樣在交互過(guò)程中瀏覽器可以自動(dòng)的按照規(guī)則把這個(gè)標(biāo)識(shí)發(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會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上，當(dāng)訪問(wèn)增多脐恩，會(huì)比較占用你服務(wù)器的性能镐侯，考慮到減輕服務(wù)器性能方面，應(yīng)當(dāng)使用cookie
4、單個(gè)cookie保存的數(shù)據(jù)不能超過(guò)4K苟翻，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie
5韵卤、建議將登錄信息等重要信息存放為session，其他信息如果需要保留崇猫，可以放在cookie中
6沈条、session保存在服務(wù)器，客戶端不知道其中的信心诅炉；cookie保存在客戶端蜡歹，服務(wù)器能夠知道其中的信息
7、session中保存的是對(duì)象涕烧，cookie中保存的是字符串
8月而、session不能區(qū)分路徑，同一個(gè)用戶在訪問(wèn)一個(gè)網(wǎng)站期間议纯，所有的session在任何一個(gè)地方都可以訪問(wèn)到父款，而cookie中如果設(shè)置了路徑參數(shù)，那么同一個(gè)網(wǎng)站中不同路徑下的cookie互相是訪問(wèn)不到的*

web Storage和Cookie的區(qū)別

Web Storage的概念和cookie相似瞻凤，區(qū)別是它是為了更大容量存儲(chǔ)設(shè)計(jì)的憨攒，cookie的大小是受限的，并且每次請(qǐng)求一個(gè)新的頁(yè)面的時(shí)候cookie都會(huì)被發(fā)送過(guò)去阀参，這樣無(wú)形中浪費(fèi)了帶寬肝集，另外cookie還需要指定作用域，不可跨域調(diào)用结笨。
除此之外包晰，web storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開(kāi)發(fā)者自己封裝setCookie炕吸，getCookie。
但是cookie也是不可或缺的勉痴，cookie的作用是與服務(wù)器進(jìn)行交互赫模，作為http規(guī)范的一部分而存在的，而web Storage僅僅是為了在本地“存儲(chǔ)”數(shù)據(jù)而生
sessionStorage蒸矛、localStorage瀑罗、cookie都是在瀏覽器端存儲(chǔ)的數(shù)據(jù)，其中sessionStorage的概念很特別雏掠，引入了一個(gè)“瀏覽器窗口”的概念斩祭，sessionStorage是在同源的同窗口中，始終存在的數(shù)據(jù)乡话，也就是說(shuō)只要這個(gè)瀏覽器窗口沒(méi)有關(guān)閉摧玫，即使刷新頁(yè)面或進(jìn)入同源另一個(gè)頁(yè)面，數(shù)據(jù)仍然存在绑青，關(guān)閉窗口后诬像，sessionStorage就會(huì)被銷毀屋群，同時(shí)“獨(dú)立”打開(kāi)的不同窗口，即使是同一頁(yè)面坏挠，sessionStorage對(duì)象也是不同的

Web Storage帶來(lái)的好處：

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

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

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

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

其實(shí)數(shù)據(jù)既可以在瀏覽器本地存儲(chǔ)，也可以在服務(wù)器端存儲(chǔ)
瀏覽器可以保存一些數(shù)據(jù)弃理，需要的時(shí)候直接從本地存取溃论，sessionStorage、localStorage和cookie都是由瀏覽器存儲(chǔ)在本地的數(shù)據(jù)
服務(wù)器端也可以保存所有用戶的所有數(shù)據(jù)痘昌，但需要的時(shí)候?yàn)g覽器要向服務(wù)器請(qǐng)求數(shù)據(jù)钥勋。
1、服務(wù)器端可以保存用戶的持久數(shù)據(jù)辆苔，如數(shù)據(jù)庫(kù)和云存儲(chǔ)將用戶的大量數(shù)據(jù)保存在服務(wù)器端
2算灸、服務(wù)器端也可以保存用戶的臨時(shí)會(huì)話數(shù)據(jù)，服務(wù)器端的session機(jī)制驻啤，如jsp的session對(duì)象菲驴，數(shù)據(jù)保存在服務(wù)器上，

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

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

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

共同點(diǎn)：都是保存在瀏覽器端闷供、且同源的
區(qū)別：
1烟央、cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要），即cookie在瀏覽器和服務(wù)器間來(lái)回傳遞歪脏，而sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)送給服務(wù)器疑俭，僅在本地保存。cookie數(shù)據(jù)還有路徑（path）的概念婿失，可以限制cookie只屬于某個(gè)路徑下
2钞艇、存儲(chǔ)大小限制也不同，cookie數(shù)據(jù)不能超過(guò)4K豪硅，同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶cookie哩照、所以cookie只適合保存很小的數(shù)據(jù)，如會(huì)話標(biāo)識(shí)懒浮。sessionStorage和localStorage雖然也有存儲(chǔ)大小的限制飘弧，但比cookie大得多，可以達(dá)到5M或更大
3砚著、數(shù)據(jù)有效期不同次伶，sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉之前有效；localStorage：始終有效稽穆，窗口或?yàn)g覽器關(guān)閉也一直保存冠王，因此用作持久數(shù)據(jù)；cookie：只在設(shè)置的cookie過(guò)期時(shí)間之前有效舌镶，即使窗口關(guān)閉或?yàn)g覽器關(guān)閉
4柱彻、作用域不同，sessionStorage不在不同的瀏覽器窗口中共享餐胀，即使是同一個(gè)頁(yè)面哟楷；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的
5骂澄、web Storage支持事件通知機(jī)制吓蘑，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽(tīng)者
6、web Storage的api接口使用更方便

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

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