文章不是簡單的的Ctrl C與V，而是一個字一個標點符號慢慢寫出來的。我認為這才是是對讀者的負責，本教程由技術愛好者成笑笑(博客：http://www.chengxiaoxiao.com/)寫作完成。如有轉載，請聲明出處。
介紹
我們把數據存儲在瀏覽器，一直使用的Cookie，但其實Cookie是有很多數量和大小的限制的。現在我們不用考慮這些了，我們將要學習一種基于HTML5的新技術Web存儲。來解決這個問題。
背景
雖然Web存儲已經有了自己的規范（(http://dev.w3.org/html5/webstorage/) ），并且也在獨立于Html5進行開發。但Web存儲通常是集中在HTML5技術之下的。
不像cookie一樣，數據存儲在Web Storage意味著客戶端不在請求服務器了。通常情況下，在瀏覽器和服務器來回的傳遞數據用的是HTTP request，這限制了如果要在客戶端存儲大量數據，必須使用Cookie，但是如果服務器端用不到Cookie。而在請求時，也會把Cookie發送到服務器，浪費了大量帶寬。并且瀏覽器強制限制了Cookie的大小和數量，在一個相同的域名上，你可以存儲不多于50個cookie和4KB的大小。
使用Web Stroage就會解決以上兩個問題。首先，它不會離開瀏覽器，其次，也允許存儲更多更大的數據。W3C推薦限制在5MB之內，但是如果用戶需要更多的存儲，是可以在瀏覽器中進行設置的。當前一般瀏覽器會允2MB的容量。
還有另外一種存儲方式就是FileSystem API (www.w3.org/TR/file-system-api/)。簡單來水就是使用此api可以進行文件的讀寫操作，目前來說谷歌瀏覽器是當前兼容此功能的。
當然如果你對數據庫感興趣的話，你可以看一下IndexedDB API (www.w3.org/TR/IndexedDB/)，這個api提供了可以存儲大量存儲內容數據的能力。目前為止，只有火狐、谷歌、IE10以上支持。
使用Web Storage
Web Storage主要包括本地存儲和基于Session的存儲。它是在域名之上的。如果你不刪除這些存儲，它是會一直存在的。
如果你想添加和修改數據，使用下面的Api：
localStorage.setItem(“mydata”,”this is a data”);
獲取數據：var dat = localStorage.getItem(“mydata”);
當然下面的形式也可以使用的：
第一種：
var data = localStorage["myData"];
localStorage["mydata"] = “this is a data”;
第二種：
var data = localStorage.mydata;
localStorage.mydata = “this is a data”;
刪除數據:
刪除指定名稱的數據:localStorage.removeItem(‘mydata’);
刪除所有Web Storage中的數據:localStorage.clear();
可以存儲的數據類型
Web Storage只能夠存取字符串數據，所以如果你想存取更多的數據的話，你可以使用json對象，把它轉換為json字符串。
var data = {“key”:”value”,”key1″:”value1″};
localStorage.setItem(“mydata”,JSON.stringify(data));
當你需要讀取數據的時候可以把json解析成對象：
var data = JSON.parse(localStorage.mydata);
WebStorage的數量:localStorage.length.
獲取索引的鍵：
var key =localStorage.key(0);//獲取索引為0的鍵
var data = localStoragegetItem(key);獲取值
通過循環我們就可以查找到存儲的所有鍵值對了。
sessionStorage和localStorage有相同的api。不同的是SessionStorage是基于會話級別的。
微信號：net4k8k（做(4k+8k)+月薪的程序員）
微信名稱：net知識分享
介紹：主要以發布和分享.Net和安卓文章為主，爭做全棧開發工程師，愛學習，愛挑戰，愛編程。
打造C#入門教程。總結自己已經習得的技術體系。分享到網絡。為中國的軟件復興貢獻自己的一份力。
如有不恰當之處，還請指正。
作者：成笑笑
職業：應屆畢業生，找工作中。
本人聯系方式：cxx@chengxiaoxiao.com
GitHub：https://github.com/shellcheng
My CnBlogs:http://www.cnblogs.com/happpytoo/
