phonegap入门（二）-使用html5API存储信息到本地
2012-05-17 21:59
387 查看
在传统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的列表信息就不会消失掉了，能持久保持。
但在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的列表信息就不会消失掉了，能持久保持。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用HTML5本地 Drag和Drop API（native API)
- HTML5项目笔记6：使用HTML5 FileSystem API设计离线文件存储
- 使用html5定位经纬度然后用百度api获取城市等位置信息
- HTML5 LocalStorage本地存储和sessionStorage使用
- HTML5本地存储——IndexedDB（一：基本使用）
- html5本地存储在手机web app中使用探讨
- 利用html5的本地存储功能实现登录用户信息保存
- HTML5 LocalStorage本地存储和sessionStorage使用
- PhoneGap HTML5 DB操作类, 做本地存储
- HTML5 - Web存储使用详解（本地存储、会话存储）
- PhoneGap HTML5 DB操作类, 做本地存储
- html5 离线存储 地理信息与本地存储
- PhoneGap HTML5 DB操作类, 做本地存储
- 关于使用HTML5本地存储图片的介绍——和派孔明
- Html5 本地文件读取 API 研究使用过程中的意外发现 - MDN
- 使用StatFs用于获取系统/sdcard存储空间信息 api18中增加的方法
- 突袭HTML5之Javascript API扩展3 - 本地存储
- HTML5 LocalStorage本地存储和sessionStorage使用
- html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
- [HTML] 使用HTML5的本地存储localStorage