在传统web应用中，一般使用的是B/S结构，即浏览器和远程服务器。浏览器只是控制用户的界面响应，服务器尽量做到快速产生web页以及存储持久化数据。这种重服务器轻浏览器的方法大大加重服务器的负担。而且在网络速度不理想的状态下，也会影响到响应的速度。

    但在html5的API提供了本地存储的功能，减少了传输那些不必要的数据，加快了传输速度，减轻了服务器的负担。下面的一个例子展示了如何通过api存储数据在本地。建立一个简单的表单，可以输入水果名称，点击按钮可以存储在本地。

1、在工程根目录下创建一个index.html

2、编辑index.html，如下

 
   
   
         scale=1.0»>    
 
 
   

3、现在你可以在Safari浏览器中看到如下效果

4、你还可以在input元素中使用Html5的placeholder属性，给用户一个提示。

5、接下来我们可以添加Javascript来获取表单的提交事件，当按下按钮，就会根据填入名称插入一个food元素。如下所示：

6、我再在表单末尾添加

元素，如下：

     


 






效果如图所示：







8、现在，如果我们重新加载页面，foods列表将会消失。让我们试着把foods 信息保存起来。我们使用HTML5 LocalStorage API，在appendChild后添加如下代码：

var foodKey = "food." + (window.localStorage.length + 1);
window.localStorage.setItem(foodKey, newFoodItem);





9、我们稍微整理一下代码，把添加新元素的代码抽取放到一个方法中，红体字就是我们的核心，不熟悉这个html5 存储功能API可以参考我的博客web Storage总结，完整代码如下所示：




10、最后我在支持html5的浏览器（phonegap）中测试，当重新加载页面，foods的列表信息就不会消失掉了，能持久保持。