Html5学习之旅-html5的留言记事本开发(17)
2015-09-23 11:06
351 查看
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)
- Html5学习之旅-html5的留言记事本开发(17)
- html5
- html5语法改变
- HTML5学习笔记之video标签
- HTML5学习笔记之audio标签
- Html5的学习之旅-Html5的web Storage概述(16)
- Html5的学习之旅-Html5的web Storage概述(16)
- Html5的学习之旅-Html5的web Storage概述(16)
- Html5的学习之旅-Html5的web Storage概述(16)
- HTML5的3D效果
- 实时视频h5
- HTML5+CSS
- 小强的HTML5移动开发之路(11)——链接,图片,表格,框架
- 小强的HTML5移动开发之路(11)——链接,图片,表格,框架
- 小强的HTML5移动开发之路(11)——链接,图片,表格,框架
- HTML5中Access-Control-Allow-Origin解决跨域问题
- 浅尝HTML5之canvas
- HTML5基础之canvas绘图(一)
- html5 canvas绘制路径