HTML5 Web存儲(chǔ)挽封,一個(gè)比cookie更好用的方法
什么是 HTML5 Web 存儲(chǔ)?
使用HTML5可以在本地存儲(chǔ)用戶的瀏覽數(shù)據(jù)。
早些時(shí)候,本地存儲(chǔ)使用的是 cookie渺鹦。但是Web 存儲(chǔ)需要更加的安全與快速. 這些數(shù)據(jù)不會(huì)被保存在服務(wù)器上,但是這些數(shù)據(jù)只用于用戶請(qǐng)求網(wǎng)站數(shù)據(jù)上.它也可以存儲(chǔ)大量的數(shù)據(jù),而不影響網(wǎng)站的性能.
數(shù)據(jù)以 鍵/值 對(duì)存在, web網(wǎng)頁(yè)的數(shù)據(jù)只允許該網(wǎng)頁(yè)訪問(wèn)使用痊夭。
瀏覽器支持
Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存儲(chǔ)。
注意:Internet Explorer 7 及更早IE版本不支持web 存儲(chǔ).
localStorage和sessionStorage
客戶端存儲(chǔ)數(shù)據(jù)的兩個(gè)對(duì)象為:
localStorage - 沒(méi)有時(shí)間限制的數(shù)據(jù)存儲(chǔ)
sessionStorage - 針對(duì)一個(gè)session的數(shù)據(jù)存儲(chǔ)
在使用web存儲(chǔ)前脏里,應(yīng)檢查瀏覽器是否支持localStorage和sessionStorage
if(typeof(Storage) !== "undefined"){ //支持的代碼?} else { //sorry她我,不支持?};
localStorage 對(duì)象
localStorage 對(duì)象存儲(chǔ)的數(shù)據(jù)沒(méi)有時(shí)間限制。第二天迫横、第二周或下一年之后番舆,數(shù)據(jù)依然可用。
實(shí)例:
localStorage.sitename="菜鳥(niǎo)教程";
document.getElementById("result").innerHTML="網(wǎng)站名:"+localStorage.sitename;
實(shí)例解析:
使用 key="sitename" 和 value="菜鳥(niǎo)教程" 創(chuàng)建一個(gè) localStorage 鍵/值對(duì)矾踱。
檢索鍵值為"sitename" 的值然后將數(shù)據(jù)插入 id="result"的元素中恨狈。
不管是localStorage,還是sessionStorage介返,可使用的API都相同拴事,常用的有如下幾個(gè)(以localStorage為例)
1沃斤、保存數(shù)據(jù) : localStorage.setItem(key,value);
2、讀取數(shù)據(jù) : localStorage.getItem(key);
3刃宵、刪除單個(gè)數(shù)據(jù) : localStorage.removeItem(key);
4衡瓶、刪除所有數(shù)據(jù) :localStorage.clear();
5、得到某個(gè)索引的key : localStorage.key(index);
sessionStorage對(duì)象
sessionStorage方法針對(duì)一個(gè)session進(jìn)行數(shù)據(jù)存儲(chǔ)牲证。當(dāng)用戶關(guān)閉瀏覽器窗口后哮针,數(shù)據(jù)會(huì)被刪除。
webstorage和cookie的區(qū)別
WebStorage的概念和cookie相似坦袍,區(qū)別是它是為了更大容量存儲(chǔ)設(shè)計(jì)的十厢。Cookie的大小是受限的,并且每次你請(qǐng)求一個(gè)新的頁(yè)面的時(shí)候Cookie都會(huì)被發(fā)送過(guò)去捂齐,這樣無(wú)形中浪費(fèi)了帶寬蛮放,另外cookie還需要指定作用域,不可以跨域調(diào)用奠宜。
除此之外包颁,WebStorage擁有setItem,getItem,removeItem,clear等方法,不像cookie需要前端開(kāi)發(fā)者自己封裝setCookie压真,getCookie娩嚼。但是Cookie也是不可以或缺的:Cookie的作用是與服務(wù)器進(jìn)行交互,作為HTTP規(guī)范的一部分而存在滴肿,而WebStorage僅僅是為了在本地“存儲(chǔ)”數(shù)據(jù)而生岳悟。