Javascript本地存儲(chǔ)小結(jié)

1. 各種存儲(chǔ)方案的簡(jiǎn)單對(duì)比

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

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

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

Google Gears SQLite ：需要插件支持，容量無(wú)限制

LocalStorage：HTML5，容量為5M

SesstionStorage：HTML5，容量為5M

globalStorage：Firefox獨(dú)有的，F(xiàn)irefox13開(kāi)始就不再支持這個(gè)方法

UserData僅IE支持， Google Gears SQLite需要插件，F(xiàn)lash已經(jīng)伴隨著HTML5的出現(xiàn)漸漸退出了歷史舞臺(tái)，因此今天我們的主角只有他們?nèi)齻€(gè)：Cookie,LocalStorge,SesstionStorge;

2. Cookie

作為一個(gè)前端和Cookie打交道的次數(shù)肯定不會(huì)少了，Cookie算是比較古老的技術(shù)了1993 年，網(wǎng)景公司雇員 Lou Montulli 為了讓用戶在訪問(wèn)某網(wǎng)站時(shí)，進(jìn)一步提高訪問(wèn)速度，同時(shí)也為了進(jìn)一步實(shí)現(xiàn)個(gè)人化網(wǎng)絡(luò)，發(fā)明了今天廣泛使用的 Cookie。

2.1 Cookie的特點(diǎn)

我們先來(lái)看下Cookie的特點(diǎn)：

1）cookie的大小受限制，cookie大小被限制在4KB，不能接受像大文件或郵件那樣的大數(shù)據(jù)。

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

3）用戶每請(qǐng)求一次服務(wù)器數(shù)據(jù)，cookie則會(huì)隨著這些請(qǐng)求發(fā)送到服務(wù)器，服務(wù)器腳本語(yǔ)言如PHP等能夠處理cookie發(fā)送的數(shù)據(jù)，可以說(shuō)是非常方便的。當(dāng)然前端也是可以生成Cookie的，用js對(duì)cookie的操作相當(dāng)?shù)姆爆崳瑸g覽器只提供document.cookie這樣一個(gè)對(duì)象，對(duì)cookie的賦值，獲取都比較麻煩。而在PHP中，我們可以通過(guò)setcookie()來(lái)設(shè)置cookie，通過(guò)$_COOKIE這個(gè)超全局?jǐn)?shù)組來(lái)獲取cookie。

cookie的內(nèi)容主要包括：名字，值，過(guò)期時(shí)間，路徑和域。路徑與域一起構(gòu)成cookie的作用范圍。若不設(shè)置過(guò)期時(shí)間，則表示這個(gè)cookie的生命期為瀏覽器會(huì)話期間，關(guān)閉瀏覽器窗口，cookie就消失。這種生命期為瀏覽器會(huì)話期的cookie被稱為會(huì)話cookie。會(huì)話cookie一般不存儲(chǔ)在硬盤上而是保存在內(nèi)存里，當(dāng)然這種行為并不是規(guī)范規(guī)定的。若設(shè)置了過(guò)期時(shí)間，瀏覽器就會(huì)把cookie保存到硬盤上，關(guān)閉后再次打開(kāi)瀏覽器，這些cookie仍然有效直到超過(guò)設(shè)定的過(guò)期時(shí)間。存儲(chǔ)在硬盤上的cookie可以在不同的瀏覽器進(jìn)程間共享，比如兩個(gè)IE窗口。而對(duì)于保存在內(nèi)存里的cookie，不同的瀏覽器有不同的處理方式。

2.2 Session

說(shuō)到Cookie就不能不說(shuō)Session。

Session機(jī)制。session機(jī)制是一種服務(wù)器端的機(jī)制，服務(wù)器使用一種類似于散列表的結(jié)構(gòu)（也可能就是使用散列表）來(lái)保存信息。當(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ù)器。一般這個(gè)cookie的名字都是類似于SEEESIONID。但cookie可以被人為的禁止，則必須有其他機(jī)制以便在cookie被禁止時(shí)仍然能夠把session id傳遞回服務(wù)器。經(jīng)常被使用的一種技術(shù)叫做URL重寫(xiě)，就是把session id直接附加在URL路徑的后面。比如：http://damonare.cn?sessionid=123456還有一種技術(shù)叫做表單隱藏字段。就是服務(wù)器會(huì)自動(dòng)修改表單，添加一個(gè)隱藏字段，以便在表單提交時(shí)能夠把session id傳遞回服務(wù)器。比如：

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

實(shí)際上這種技術(shù)可以簡(jiǎn)單的用對(duì)action應(yīng)用URL重寫(xiě)來(lái)代替。

2.3 Cookie和Session簡(jiǎn)單對(duì)比

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中

2.4 document.cookie的屬性

expires屬性

指定了coolie的生存期，默認(rèn)情況下coolie是暫時(shí)存在的，他們存儲(chǔ)的值只在瀏覽器會(huì)話期間存在，當(dāng)用戶推出瀏覽器后這些值也會(huì)丟失，如果想讓cookie存在一段時(shí)間，就要為expires屬性設(shè)置為未來(lái)的一個(gè)過(guò)期日期。現(xiàn)在已經(jīng)被max-age屬性所取代，max-age用秒來(lái)設(shè)置cookie的生存期。

path屬性

它指定與cookie關(guān)聯(lián)在一起的網(wǎng)頁(yè)。在默認(rèn)的情況下cookie會(huì)與創(chuàng)建它的網(wǎng)頁(yè)，該網(wǎng)頁(yè)處于同一目錄下的網(wǎng)頁(yè)以及與這個(gè)網(wǎng)頁(yè)所在目錄下的子目錄下的網(wǎng)頁(yè)關(guān)聯(lián)。

domain屬性

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

secure屬性

它是一個(gè)布爾值，指定在網(wǎng)絡(luò)上如何傳輸cookie，默認(rèn)是不安全的，通過(guò)一個(gè)普通的http連接傳輸

2.5 cookie實(shí)戰(zhàn)

這里我們使用javascript來(lái)寫(xiě)一段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)
 }
 }
}

注意這里對(duì)Cookie的生存期進(jìn)行了定義，也就是355天

3. localStorage

這是一種持久化的存儲(chǔ)方式，也就是說(shuō)如果不手動(dòng)清除，數(shù)據(jù)就永遠(yuǎn)不會(huì)過(guò)期。

它也是采用Key - Value的方式存儲(chǔ)數(shù)據(jù)，底層數(shù)據(jù)接口是sqlite，按域名將數(shù)據(jù)分別保存到對(duì)應(yīng)數(shù)據(jù)庫(kù)文件里。它能保存更大的數(shù)據(jù)（IE8上是10MB，Chrome是5MB），同時(shí)保存的數(shù)據(jù)不會(huì)再發(fā)送給服務(wù)器，避免帶寬浪費(fèi)。

3.1 localStorage的屬性方法

下表是localStorge的一些屬性和方法

3.2 localStorage的缺點(diǎn)

① localStorage大小限制在500萬(wàn)字符左右，各個(gè)瀏覽器不一致

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

③ localStorage本質(zhì)是在讀寫(xiě)文件，數(shù)據(jù)多的話會(huì)比較卡（firefox會(huì)一次性將數(shù)據(jù)導(dǎo)入內(nèi)存，想想就覺(jué)得嚇人啊）

④ localStorage不能被爬蟲(chóng)爬取，不要用它完全取代URL傳參

4. sessionStorage

和服務(wù)器端使用的session類似，是一種會(huì)話級(jí)別的緩存，關(guān)閉瀏覽器會(huì)數(shù)據(jù)會(huì)被清除。不過(guò)有點(diǎn)特別的是它的作用域是窗口級(jí)別的，也就是說(shuō)不同窗口間的sessionStorage數(shù)據(jù)不能共享的。使用方法（和localStorage完全相同）：

5. sessionStorage和localStorage的區(qū)別

sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能訪問(wèn)并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級(jí)別的存儲(chǔ)。當(dāng)用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)立馬會(huì)被刪除。

localStorage用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期的。第二天、第二周或下一年之后，數(shù)據(jù)依然可用。

5.1 測(cè)試

sessionStorage:

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

測(cè)試過(guò)程：我們?cè)诳刂婆_(tái)輸入上述代碼查看打印結(jié)果

控制臺(tái)首次輸入代碼：

關(guān)閉窗口，控制臺(tái)再次輸入代碼：

所謂的關(guān)閉窗口即銷毀，就是這樣，關(guān)閉窗口重新打開(kāi)輸入代碼輸出結(jié)果還是上面圖片的樣子，也就是說(shuō)關(guān)閉窗口后sessionStorage.pagecount即被銷毀，除非重心創(chuàng)建。或者從歷史記錄進(jìn)入才會(huì)相關(guān)數(shù)據(jù)才會(huì)存在。好的，我們?cè)賮?lái)看下localStorge表現(xiàn)：

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

控制臺(tái)首次輸入代碼：

關(guān)閉窗口，控制臺(tái)再次輸入代碼：

6. web Storage和cookie的區(qū)別

Web Storage(localStorage和sessionStorage)的概念和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ù)而生

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com