1. 程式人生 > >cookie、localStorage、sessionStorage的有效期和作用域

cookie、localStorage、sessionStorage的有效期和作用域

cookie,localStorage,sessionStorage都可以實現客戶端儲存

cookie,localStorage,sessionStorage三者的區別分別為:

1、cookie:

cookie作為最早期的被設計web瀏覽器儲存少量資料,從底層看,它是作為http協議的一種擴充套件實現。cookie資料會自動在web瀏覽器和web伺服器之間傳輸資料。

1-1、cookie有效期:

cookie預設有效期非常短暫,存在於web瀏覽器會話期間,當瀏覽器關閉,cookie也就消失了。如果要延長cookie的有效期,可以設定max-age屬性(單位秒)

1-2、cookie作用域:

cookie作用域是通過domain文件源和path文件路徑來確定的。預設情況下,cookie和建立它的web頁面有關,並對web頁面和該web頁面同目錄或者子目錄的其他web頁面可見。當設定path="/",它的作用域就變成文件源級別的了。

1-3、cookie的用法,

使用cookie的時候我們需要先設定cookie:

function setCookie(name, value) {

var Days = 30;//cookie的儲存時間為30天

var exp = new Date();

exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);

document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();

}

setCookie("性別", "男"); //儲存name為性別,value為男的cookie

如果使用則需要獲取cookie:

function getCookie(name) {

var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");

if(arr = document.cookie.match(reg))

return unescape(arr[2]);

else

return null;

}

var a=getCookie("性別");//獲取名為性別的cookie

console.log(a);

刪除cookie:

function delCookie(name) {

var exp = new Date();

exp.setTime(exp.getTime() - 1);

var cval = getCookie(name);//在刪除cookie之前我們需要先獲取cookie

if(cval != null)

document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();

}

delCookie("性別");//刪除名為性別的cookie

1-4、cookie的優點:具有極高的擴充套件性和可用性

1-4-1、通過良好的程式設計,控制儲存在cookie中的session物件的大小;

1-4-2、通過加密和安全傳輸技術,減少cookie被破解的可能性;

1-4-3、只有在cookie中存放不敏感的資料,即使被盜取也不會有很大的損失;

1-4-4、控制cookie的生命週期,使之不會永遠有效,這樣的話偷盜者很可能拿到的就是一個過期的cookie;

1-5、cookie的缺點:

1-5-1、cookie的長度和數量限制,每個domain最多隻能有20條cookie,每個cookie的長度不能超過4KB,否則會被截掉;

1-5-2、安全性問題,如果cookie被人攔掉了,那個人就可以獲取到所有的session資訊,加密的話也不能起到相對的作用;

1-5-3、有些狀態不可能儲存在客戶端,例如:為了防止重複提交表單,我們需要在伺服器端儲存一個計數器,如若吧計數器儲存在客戶端,則起不到什麼作用;

2、localStorage, sessionStorage

localStorage, sessionStorage是html5中新增的web儲存的功能,它解決了客戶端儲存的一些缺點,並提供更強大的功能和操作API。(sessionStorage、localStorage 在儲存物件時只會得到字串型別的值,無法得到期望的值)

2-1、localStorage有效期:

永不失效,除非web應用主動刪除。

2-2、localStorage作用域:

localStorage的作用域是限定在文件源級別的。文件源通過協議、主機名以及埠三者來確定。

2-3、sessionStorage有效期:

sessionStorage的有效期是和儲存資料指令碼所在的最頂層的視窗或者是瀏覽器標籤是一樣的,一旦視窗或者標籤頁被永久關閉了,儲存的資料也就失效了。

2-4、sessionStorage作用域:

sessionStorage的作用域也是限定在文件源級別。但需要注意的是,如果相同文件源的頁面渲染在不同的標籤中,sessionStorage的資料是無法共享的。

2-5、localStorage與sessionStorage的用法:

兩者都有大約5M的儲存空間,並且使用頻率比較高,兩者的最主要的區別就是儲存期限,localStorage儲存的資料為持久資料,而sessionStorage當你關閉瀏覽器的時候資料就沒了

2-5-1、localstorage的用法:

if(window.localStorage){ //相容

//alert("瀏覽器支援");

var local=window.localStorage;

local.setItem('name','wu');

local.name2='Mr.Wu';

local.setItem('name2','Mr.Wu');//修改(再儲存一遍);

localStorage.removeItem("name");//清除

localStorage.clear();//全部清除

}

2-5-2、sessionStorage的用法:

if(window.sessionStorage){

//alert("瀏覽器支援");

var session=window.sessionStorage;

session.setItem('name','wu');//設定儲存

session.name2='Mr.Wu';//設定儲存

session.setItem('name','Mr.WuGe');//修改(再儲存一遍);

sessionStorage.removeItem("name");

sessionStorage.clear(); 

}

除了上述列舉的,cookie和localStorage、sessionStorage在儲存大小的限制也不一樣, 由於每個瀏覽器的實現標準都不一樣,只說一下RFC 2965推薦標準(瀏覽器儲存cookie不超過300個,為每個伺服器儲存的cookie不超過20個,每個cookie大小不超過4KB)。localStorage、sessionStorage設定值時可以達到8M.