在HTML5出現(xiàn)之前，如果開發(fā)者需要在客戶端存儲(chǔ)少量的數(shù)據(jù)，只能通過cookie來實(shí)現(xiàn)，但是cookie存在幾個(gè)不足點(diǎn)：

 •每個(gè)域名下cookie的大小限制在4KB。
 •cookie會(huì)包含在每個(gè)http請(qǐng)求中，這樣會(huì)導(dǎo)致發(fā)送重復(fù)的數(shù)據(jù)。
 •cookie在網(wǎng)絡(luò)傳輸過程中沒有加密，存在安全隱患。

在HTML5新增了Web storage功能，Web Storage官方建議為每個(gè)網(wǎng)站是5MB，能存儲(chǔ)比cookie更多的數(shù)據(jù)，并且具有比cookie更強(qiáng)大的功能。Web Storage現(xiàn)在已經(jīng)得到了Firefox、Opera、Chrome、Safari各主流瀏覽器的支持。
 
Web Storage簡(jiǎn)介

Web Storage又分為Session Storage和Local Storage：

Session Storage：與session類似，Session Storage保存的數(shù)據(jù)生存期限與Session期限相同，用戶Session結(jié)束時(shí)，Session Storage保存的數(shù)據(jù)也就消失了。

Local Storage： Local Storage保存的數(shù)據(jù)一直在本地，除非用戶或程序顯式地清楚，否則這些數(shù)據(jù)會(huì)一致存在。

window對(duì)象中提供了sessionStorage和localStorage兩個(gè)屬性，這兩個(gè)屬性分別代表了Session Storage和Local Storage。這個(gè)兩個(gè)功能和用法幾乎是相同的，只是它們保存數(shù)據(jù)的生存期限不同而已。storage提供了以下屬性和方法（以localStorage為例）： 

 •localStorage.length：獲取key-value對(duì)的數(shù)目；
 •localStorage.key(index)：獲取第index索引的key；
 •localStorage.getItem(key)：獲取指定key對(duì)應(yīng)的value；
 •localStorage.setItem(key,value)：保存指定的key-value對(duì)；
 •localStorage.removeItem(key)：刪除指定key對(duì)應(yīng)的key-value對(duì)；
 •localStorage.clear()：刪除所有key-value對(duì)。
 
需要注意的是，key和value都必須為字符串，換言之，web Storage的API只能操作字符串。那么一些不是字符串的數(shù)據(jù)，我們可以通過JSON等方式將其轉(zhuǎn)化成字符串格式后在操作。

Web Storage用JSON存儲(chǔ)多個(gè)數(shù)據(jù)

我們通過一個(gè)小程序來熟悉一下相關(guān)屬性和方法的基本用法：

 •錄入學(xué)生的基本信息（包括學(xué)號(hào)，姓名，年級(jí)，性別），以學(xué)號(hào)為key值來存儲(chǔ)到local storage中；
 •通過學(xué)號(hào)來查詢學(xué)生的基本信息；
 •顯示全部學(xué)生的信息；
 
首先我們?cè)O(shè)計(jì)HTML頁面

發(fā)表評(píng)論 共有條評(píng)論 用戶名: 密碼: 驗(yàn)證碼: 匿名發(fā)表