在HTML5出現之前，如果開發者需要在客戶端存儲少量的數據，只能通過cookie來實現，但是cookie存在幾個不足點：

 •每個域名下cookie的大小限制在4KB。
 •cookie會包含在每個http請求中，這樣會導致發送重復的數據。
 •cookie在網絡傳輸過程中沒有加密，存在安全隱患。

在HTML5新增了Web storage功能，Web Storage官方建議為每個網站是5MB，能存儲比cookie更多的數據，并且具有比cookie更強大的功能。Web Storage現在已經得到了Firefox、Opera、Chrome、Safari各主流瀏覽器的支持。
 
Web Storage簡介

Web Storage又分為Session Storage和Local Storage：

Session Storage：與session類似，Session Storage保存的數據生存期限與Session期限相同，用戶Session結束時，Session Storage保存的數據也就消失了。

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

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

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

Web Storage用JSON存儲多個數據

我們通過一個小程序來熟悉一下相關屬性和方法的基本用法：

 •錄入學生的基本信息（包括學號，姓名，年級，性別），以學號為key值來存儲到local storage中；
 •通過學號來查詢學生的基本信息；
 •顯示全部學生的信息；
 
首先我們設計HTML頁面

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表