web留言记事本的开发!!!!!代码如下index.html的代码<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<title>h5表格提交</title>
<script src="appweb.js"></script></head><body>
<p id="msg"></p>
<textarea id="memo" cols="60" rows="10"></textarea><br/>
<input type="button" value="追加数据" onclick="savestorage('memo')">
<input type="button" value="删除数据" onclick="clearstorage()"></body></html>
js的代码function savestorage(id){
var data = document.getelementbyid(id).value; var time = new date().gettime();
localstorage.setitem(time,data);
loadstorage('msg');
}function loadstorage(id){
var result = "<table border = '1'>"; for(var i = 0;i < loadstorage.length;i++){ var key = localstorage.key(i); var value = localstorage.getitem(key); var date = new date();
date.settime(key);
result += "<tr><td>"+value+"</td><td>"+date+"</td></tr>";
}
result += "</table>"; var target = document.getelementbyid(id);
target.innerhtml = result;
}function clearstorage(){
localstorage.clear();
loadstorage('msg');
}
!!!!效果图
web留言记事本的开发!!!!!代码如下index.html的代码<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<title>h5表格提交</title>
<script src="appweb.js"></script></head><body>
<p id="msg"></p>
<textarea id="memo" cols="60" rows="10"></textarea><br/>
<input type="button" value="追加数据" onclick="savestorage('memo')">
<input type="button" value="删除数据" onclick="clearstorage()"></body></html>
js的代码function savestorage(id){
var data = document.getelementbyid(id).value; var time = new date().gettime();
localstorage.setitem(time,data);
loadstorage('msg');
}function loadstorage(id){
var result = "<table border = '1'>"; for(var i = 0;i < loadstorage.length;i++){ var key = localstorage.key(i); var value = localstorage.getitem(key); var date = new date();
date.settime(key);
result += "<tr><td>"+value+"</td><td>"+date+"</td></tr>";
}
result += "</table>"; var target = document.getelementbyid(id);
target.innerhtml = result;
}function clearstorage(){
localstorage.clear();
loadstorage('msg');
}
!!!!效果图
以上就是html5学习之旅-html5的留言记事本开发(17)的内容。