在傳統web應用中，一般使用的是B/S結構，即瀏覽器和遠程服務器。瀏覽器只是控制用戶的界面響應，服務器儘量做到快速產生web頁以及存儲持久化數據。這種重服務器輕瀏覽器的方法大大加重服務器的負擔。而且在網絡速度不理想的狀態下，也會影響到響應的速度。
但在html5的API提供了本地存儲的功能，減少了傳輸那些不必要的數據，加快了傳輸速度，減輕了服務器的負擔。下面的一個例子展示瞭如何通過api存儲數據在本地。建立一個簡單的表單，可以輸入水果名稱，點擊按鈕可以存儲在本地。
1、在工程根目錄下創建一個index.html
2、編輯index.html，如下
<html>
<head>
<title>Sites Without Servers</title>
<style>
body {
background: white;
}
div#main {
background: #ccc;
border: black 1px solid;
height: 82%;
padding: 10%;
width: 80%;
-webkit-border-radius: 8px;
}
</style>
<meta name=»viewport» content=»width=device-width, initial-
scale=1.0»></meta>
</head>
<body>
<div id=»main»>
<h1>List Some Food</h1>
<form id=»foodForm»>
<input type=»text» id=»foodName» placeholder=»A name of
a food» />
<button id=»submitFood»>Tell Us!</button><br>
</form>
</div>
</body>
</html>
3、現在你可以在Safari瀏覽器中看到如下效果
4、你還可以在input元素中使用Html5的placeholder屬性，給用戶一個提示。
5、接下來我們可以添加javascript來獲取表單的提交事件，當按下按鈕，就會根據填入名稱插入一個food元素。如下所示：
<script>
document.addEventListener(«DOMContentLoaded», function () {
var foodList = document.getElementById(“foodList');
var foodField = document.getElementById(”foodName');
document.getElementById(«foodForm»).
addEventListener(“submit”, function (evt) {
evt.preventDefault();
var newFood = foodField.value;
var newFoodItem = document.createElement(“li”);
newFoodItem.innerHTML = newFood;
foodList.appendChild(newFoodItem);
foodField.value = “”;
return false;
}, false);
});
</script>
6、我再在表單末尾添加<ul>元素，如下：
<ul id=“foodList”>
</ul>
效果如圖所示：
8、現在，如果我們重新加載頁面，foods列表將會消失。讓我們試着把foods 信息保存起來。我們使用HTML5 LocalStorage API，在appendChild後添加如下代碼：
var foodKey = "food." + (window.localStorage.length + 1);
window.localStorage.setItem(foodKey, newFoodItem);
9、我們稍微整理一下代碼，把添加新元素的代碼抽取放到一個方法中，紅體字就是我們的核心，不熟悉這個html5 存儲功能API可以參考我的博客web Storage總結，完整代碼如下所示：
<script>
document.addEventListener(«DOMContentLoaded», function () {
var foodList = document.getElementById(‹foodList');
var foodField = document.getElementById(‹foodName');
var l = window.localStorage.length;
var i = 0;
var storedFoodName;
function addNewFoodItem(foodName) {
var newFoodItem = document.createElement('li');
newFoodItem.innerHTML = foodName;
foodList.appendChild(newFoodItem);
}
for (i; i < l; i++) {
storedFoodName = window.localStorage.key(i);
if (storedFoodName.match(/^food[.]/))
addNewFoodItem(window.localStorage.getItem(storedFoodName))
}
document.getElementById("foodForm").
addEventListener("submit", function (evt) {
evt.preventDefault();
var newFood = foodField.value;
var foodKey = "food." + (window.localStorage.length + 1);
addNewFoodItem(newFood)
window.localStorage.setItem(foodKey, newFood);
foodField.value = "";
return false;
}, false);
}, false);
</script>
10、最後我在支持html5的瀏覽器（phonegap）中測試，當重新加載頁面，foods的列表信息就不會消失掉了，能持久保持。
