Web開發中，必然會遇到需要臨時或永久保存的數據。
傳統用cookie保存在客戶端，或通過sessionID關聯session對象（如Servlet的HttpSession對象）保存在服務器端。
缺點是cookie實在太小，只有4k，已經無法應付現在的大數據時代了。而保存在服務器端很多時候根本沒必要，本地保存一下即可，何必再和服務器交互一下呢？
因此HTML5出臺了新的存儲技術：WebStorage
WebStorage分爲localStorage和sessionStorage（原本還有一個globalStorage，但在HTML5中已經被localStorage替代了）
localStorage：
即window.localStorage，通過setItem/getItem來保存獲取數據。一旦保存後只能手動調用clear / removeItem來清理。
實例演示：頁面上輸入個人信息，提交表單後，希望將數據保存在本地，下次再打開同樣畫面時從本地取出數據自動填到表單中，可以省去每次手動填寫的麻煩。
點擊提交表單，將數據保存在本地的代碼：
function doAply() {
var info = { //將表單內容保存在對象中，以便JSON化該對象
name : "",
male : "",
address : "",
phone : ""
};
info.name = document.getElementById("inputName").value; //頁面上獲取Name
var temp = document.getElementsByName("male"); //頁面上獲取Male
for(var i=0; i<temp.length; i++) {
if(temp[i].checked) {
info.male = temp[i].value;
}
}
info.address = document.getElementById("inputAddress").value; //頁面上獲取Address
info.phone = document.getElementById("inputPhone").value; //頁面上獲取Phone
localStorage.setItem("myPage_Info", JSON.stringify(info)); //JSON化該對象後，使用setItem方法保存至localStorage中
document.P.submit();
}檢查瀏覽器端的localStorage，確實已經保存成功
再次打開頁面，從localStorage中讀出這些數據，自動填充到頁面表單裏：
window.onload = init;
function init() {
for (key in localStorage) {
if(key == "myPage_Info") {
var info = JSON.parse(localStorage[key]); //解析JSON字符串成爲一個對象
document.getElementById("inputName").value = info.name; //此處開始將對象的屬性填充到頁面表單裏
var temp = document.getElementsByName("male");
for(var i=0; i<temp.length; i++) {
if(temp[i].value == info.male) {
temp[i].checked = true;
}
}
document.getElementById("inputAddress").value = info.address;
document.getElementById("inputPhone").value = info.phone;
break;
}
}
}
且慢。。。上述代碼爲何要將數據打包成JSON格式呢？因爲localStorage是瀏覽器的BOM對象，簡單地說是全局的。如果將頁面的數據一個個保存（而非打包）的話，很快localStorage裏面將涌現出大量數據，不便管理。而且非常容易遇到重名問題。因此需要事先考慮如何打包以避免煩人的重名問題。
sessionStorage：
即window.sessionStorage，不再贅述，它的API結構和localStorage完全相同，只要將上述代碼中localStorage改成sessionStorage即可，其他代碼一行不用改。那localStorage和sessionStorage有何區別呢？
區別在於清理的時機，見下表：
○:動作後數據仍在
×:動作後數據清空
可見localStorage中一旦存入數據，該數據將永存（事實上將被瀏覽器保存到本地硬盤中），只有代碼中調用localStorage.clear() / localStorage.removeItem(..)才能清理掉數據。
而sessionStorage中存入數據後，該數據的生命週期等於該頁面窗口的生命週期。如果關閉該頁面窗口或關閉瀏覽器，瀏覽器將自動將sessionStorage清空。如果打開新窗口，原先窗口頁面關聯的sessionStorage數據將在新窗口頁面中不可見。因此代碼中調用sessionStorage.clear() / sessionStorage.removeItem(..)自然能清理掉數據，但通常不需要開發者操心清理數據的問題，靠瀏覽器就來清理吧。
WebStorage相比cookie有何優勢呢？
cookie通常只有4K，而WebStorage默認有4M（具體多少以瀏覽器廠商的說明爲準），是cookie的一千倍。如果你想知道你當前瀏覽器定義的WebStorage究竟有多大，可以寫個測試腳本運行一下：
localStorage.clear();
localStorage.setItem("fuse", "-");
while(true) {
var fuse = localStorage.getItem("fuse");
try {
localStorage.setItem("fuse", fuse + fuse);
} catch(e) {
alert("Your browser blew up at " + fuse.length + " with exception: " + e);
break;
}
}
localStorage.removeItem("fuse");非要說WebStorage相比cookie有何劣勢的話，可能就是性能問題了。第一次訪問本地硬盤數據肯定會耗時一點。但本人不認爲這是個問題，除非你的應用程序對性能要求異常嚴苛，否則實際證明這點所謂的”性能問題“根本不會造成任何影響，簡單地說，普通人根本感受不到任何差異。想了解更多，可以參照：
http://calendar.perfplanet.com/2012/is-localstorage-performance-a-problem/