phonegap入门（二）-使用html5API存储信息到本地

来源：互联网发布：醉八仙宠物技能数据库编辑：程序博客网时间：2024/06/06 00:52

在传统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元素。如下所示：

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>元素，如下：

效果如图所示：

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

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

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

addNewFoodItem(newFood)
window.localStorage.setItem(foodKey, newFood);
foodField.value = "";
return false;
}, false);
}, false);
</script>

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