前言：cookie，localStorage和sessionStorage都是瀏覽器本地存儲(chǔ)數(shù)據(jù)的地方，其用法不盡相同；總結(jié)一下基本的用法。

一、cookie

定義：

存儲(chǔ)在本地，容量最大4k，在同源的http請(qǐng)求時(shí)攜帶傳遞，損耗帶寬；

可設(shè)置訪(fǎng)問(wèn)路徑，只有此路徑及此路徑的子路徑才能訪(fǎng)問(wèn)此cookie，存在有效的時(shí)間。

注意點(diǎn)：

cookie的訪(fǎng)問(wèn)需要服務(wù)器環(huán)境，直接在本地文件訪(fǎng)問(wèn)無(wú)效；

cookie的訪(fǎng)問(wèn)和設(shè)置需要導(dǎo)入jquery.cookie.js文件；

瀏覽器對(duì)每一個(gè)訪(fǎng)問(wèn)的地址下可添加的cookie是有限制的；同時(shí)每個(gè)瀏覽器可添加的cookie個(gè)數(shù)也存在限制。

作用：

儲(chǔ)存用戶(hù)的痕跡信息，如用戶(hù)名，ID號(hào)，密碼等，是服務(wù)器腳本發(fā)送給瀏覽器的加密數(shù)據(jù)，便于下次訪(fǎng)問(wèn)時(shí)用戶(hù)可以直接登錄等；

運(yùn)用代碼

//訪(fǎng)問(wèn)cookie，mycolor代表鍵var $cook = $.cookie("mycolor");//設(shè)置cookie$.cookie("mycolor", "red"});$.cookie("mycolor", "red", { expires: 7, path: '/' });//增加了有效時(shí)間和訪(fǎng)問(wèn)路徑//刪除cookie,傳遞null值$.cookie("mycolor", null});

說(shuō)明：

'mycolor'參數(shù)相當(dāng)于cookie存儲(chǔ)數(shù)據(jù)的鍵，即數(shù)據(jù)的名字，通過(guò)名字訪(fǎng)問(wèn)；

cookie的設(shè)置有三個(gè)參數(shù)，第一為設(shè)置數(shù)據(jù)的鍵，第二個(gè)為設(shè)置數(shù)據(jù)的值，expires表示有效時(shí)間，單位為天，path為訪(fǎng)問(wèn)路徑，"/"表示當(dāng)前文件路徑，在網(wǎng)站中表示根目錄。

注意：如果不設(shè)置路徑，默認(rèn)情況下只有設(shè)置cookie的網(wǎng)頁(yè)才可以訪(fǎng)問(wèn)此cookie；如果想網(wǎng)站的網(wǎng)頁(yè)可以共享cookie，將路徑設(shè)為根目錄。

注意：cookie就相當(dāng)于一個(gè)能存儲(chǔ)數(shù)據(jù)的微型本地?cái)?shù)據(jù)庫(kù)，"mycolor"相當(dāng)于每條數(shù)據(jù)的key。

二、localStorage

定義：一個(gè)本地的小型數(shù)據(jù)文件

存儲(chǔ)在本地，容量為5M或者更大，不會(huì)在請(qǐng)求時(shí)候攜帶傳遞；

數(shù)據(jù)在所有同源窗口中共享，一直有效，除非人為刪除，可作為長(zhǎng)期數(shù)據(jù)。

注意點(diǎn)：

localStorage數(shù)據(jù)不需要依賴(lài)服務(wù)器環(huán)境訪(fǎng)問(wèn)，可以直接在本地文件訪(fǎng)問(wèn)；

不需要額外的文件支持。

同源窗口指的是同一個(gè)域名下或者是index.html所在的文件夾下的文件路徑。

代碼運(yùn)用

//設(shè)置：localStorage.setItem("mycolor", "456");localStorage.mycolor= '456';//獲取：var $color = localStorage.getItem("mycolor");var $color = localStorage.mycolorvar $color = localStorage.key(0);//獲取第一個(gè)鍵，按角標(biāo)獲取var $color = localStorage.key("");//獲取最后一個(gè)鍵var $length = localStorage.length;//獲取數(shù)據(jù)的長(zhǎng)度//刪除localStorage.removeItem("mycolor");//清空l(shuí)ocalStorage.clear();//將所有保存的數(shù)據(jù)刪除

說(shuō)明：

設(shè)置數(shù)據(jù)格式類(lèi)似鍵值對(duì)，"mycolor"代表key,"456"代表值。

數(shù)據(jù)是有排序的，后加入的角標(biāo)靠前，最后加入的角標(biāo)為0.