在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頁面
XML/HTML Code複製內容到剪貼板