特點一：人才缺口巨大

據最新數據顯示，我國互聯網用戶需求持續增長，以產生了超過300萬的web前端的人才缺口。HTML5技術一再火爆直接導致各大廠人才需求與日俱增！但，我們也不得不承認傳統的前端人才很難駕馭移動端的開發，該情況直接加重了HTML5開發人才緊缺的局面。

這種背景之下，在北上廣深人的HTML5開發技術人才的薪資有望繼續突破。

特點二：擇業選擇眾多

掌握HTML5技術的人才就業面極廣，可以選擇跳入若干熱門行業。如互聯網，電子商務等等。薪資客觀，前景可期。

特點三：職場爬升快

HTML5技術人才工作晉升速度相對于其他技術學科更有優勢。一般來講，具有1-2年經驗的專員的薪資水平在8000元左右，具有2-3年工作經驗的主管的薪資水平在13000元左右，具有3-5年工作經驗的經理的薪資水平在18000元左右，5年以上的總監級水平的從業者薪資甚至可以達到25000元以上。

特點四：創業成功率高

多數工程師在工作多年后都面臨轉行和上升兩種選擇。而HTML5極速人才應用手中技術可輕松選擇自主創業。微商，淘寶皆是良選！

特點五：零基礎可學

與其他學科相比，HTML5技術開發，進階到全棧工程師職業道路更為寬廣，入門門檻低，可以供大多數學生進行選擇就業，獲取高額薪資。

特點六：網名市場需求旺盛?；ヂ摼W產值繼續升值

具有全球最多的網民，海量用戶提出了更加多元和近乎苛刻的需求，企業發展面前，前端的感官體驗決定了品牌的認可度及發展前景。Web前端工程師的工作顯得更為重要。增加用戶感官上的視聽視覺體驗，促使企業為工程師提供更加優質的薪資待遇！

章不是簡單的的Ctrl C與V，而是一個字一個標點符號慢慢寫出來的。我認為這才是是對讀者的負責，本教程由技術愛好者成笑笑(博客：http://www.chengxiaoxiao.com/)寫作完成。如有轉載，請聲明出處。

介紹

我們把數據存儲在瀏覽器，一直使用的Cookie，但其實Cookie是有很多數量和大小的限制的?，F在我們不用考慮這些了，我們將要學習一種基于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/