简单的html5 web storage留言册
在这用一个简单的示例在讲解一下如何利用web storage来保存和读取数据。
示例html代码如下：
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>html5 webstorage 留言本</title>
<script type="text/javascript" src="js/liuyanben.js"></script>
</head>
<body>
<h3>html5 webstorage 留言本</h3>
<textarea id="demo" cols="60" rows="10"></textarea><br />
<input type="button" value="留言" onclick="savelocalstorage('demo');" />
<input type="button" value="清除留言" onclick="clearlocalstorage('msg');" />
<hr />
<p id="msg"></p>
</body>
</html>
示例所用到的liuyanben.js 代码如下：
// javascript document
function savelocalstorage(id){
var data=document.getelementbyid(id).value;
var time=new date().gettime();
localstorage.setitem(time,data);
loadlocalstorage('msg');
}
function loadlocalstorage(id){
var result='<table border="1">';
for(var i=0;i<localstorage.length;i++){
var key=localstorage.key(i);
var value=localstorage.getitem(key);
var date=new date();
date.settime(key);
var datestr=date.togmtstring();
result +='<tr><td>'+value+'</td><td>'+datestr+'</td></tr>';
}
result +='</table>';
var target = document.getelementbyid(id);
target.innerhtml=result;
}
function clearlocalstorage(){
localstorage.clear();
loadlocalstorage('msg');
alert("localstorage留言已被清除！");
}
通过我们发现这个js代码中有三个调用的函数，savalocalstorage、loadlocalstorage和clearlocalstorage。
1.savalocalstorage：使用new
date().gettime()得到当前时间，调用loadlocalstorage，将时间保存为键名，将文本框中的保存为键值，再调用localstorage函数在页面上显示保存的数据。
2.loadlocalstorage：取得数据用到了localstorage.length和localstorage.key两个重要的localstorage函数。localstorage.length是所有保存在localstorage中的数据条数，localstorage.key是将数据的索引号做为index传入，可以得到索引号对应的数据。索引从0开始，如第2条数据的所以号是1。
3.clearlocalstorage：利用localstorage中的clear方法，清除保存在localstorage中的全部数据。
注：为什么以日期和时间来做为键名?因为日期和时间的值是以时间戳的形式进行管理，所以不可能存在重复的键名。
以上就是简单的html5 web storage留言册的内容。