在传统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的列表信息就不会消失掉了,能持久保持。