WEB前端培训之web Storage可让网页将资料存于本地端的技术1

这篇文章会涵盖 HTML5 Web Storage 的几个重点观念，并介绍其基本用法，以及一些该注意的地方(包含一个使用 Visual Studio 2012 来撰写範例程式的短片)。
　　Web Storage 要点整理
　　HTML5 的 Web Storage 是一种可让网页将资料储存于本地端的技术，其作用如同 cookie。
　　储存于 Web Storage 中的资料，是以 key-value pair 的形式保存(如同 cookie)。
　　Cookie 储存空间很小，最多仅能储存 4 KB 的资料。HTML5 Web Storage 的储存空间则大得多，且依各家浏览器的实作而不同。一般应该至少有 5 MB 的空间。
　　储存于 cookie 中的资料会在用户端浏览器与伺服器之间旅行(每次浏览器送出 request 至服务器时就会夹带 cookies)，Web Storage 则不会(纯粹运作于用户端)。这表示 Web Storage 不会占用宽带。
　　Web Storage 分为两种：local storage 和 session storage。细节稍后会说明。
　　Web Storage 有两种
　　Web Storage 分为两种：local storage 和 session storage。二者的主要差异在于寿命长短与有效范围。
　　寿命长短：储存于 local storage 中的资料，其生命週期较长，session storage 则较短，只要浏览器视窗或分页(tab)关闭就会消失。
　　有效范围：储存于 local storage 的资料可以跨浏览器分页(tab)，session storage 则不行。
　　先知道这样就好，稍后会进一步说明，并且用一个影片来展示它们的差别。
　　储存与读取
　　储存资料的时候，是用 Storage 物件的 setItem 方法。这裡的 Storage 物件，指的是 localStorage 或 sessionStorage，看你想要使用哪一个储存空间。
　　范例：
window.localStorage.setItem("MyKeyName", "MyDataValue");
 
window.sessionStorage.setItem("MyKeyName", "MyDataValue");

本文版权归传智播客web前端开发学院所有，欢迎转载，转载请注明作者出处，谢谢！
作者：传智播客web前端培训学院；
首发：http://www.itcast.cn/web/