web storage 简单的网页留言版
Posted 1点
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web storage 简单的网页留言版相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>简单的网页留言版</title> <script type="text/javascript" src="js/test6.js" ></script> </head> <body> <h1>简单的网页留言版</h1> <textarea id="demo" cols="60" rows="10"></textarea> <br> <input type="button" value="保存" onclick="saveStorage(\'demo\');"> <input type="button" value="清除" onclick="clearStorage(\'msg\');"> <input type="button" value="读取" onclick="loadStorage(\'msg\');"> <hr> <p id="msg"></p> </body> </html>
js
function saveStorage(id) {
var data=document.getElementById(id).value;
var time=new Date().getTime();
localStorage.setItem(time,data);
alert("数据保存成功");
}
function loadStorage(id){
var result = \'<table border="1">\';
for(var i = 0;i < localStorage.length;i++){ //localStorage.length所有保存在localStorage中的数据条数
var key = localStorage.key(i); //得到localStorage中与相应索引号对应的数据
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;
}
//将localStorage中保存的数据全部清除
function clearStorage(id){
localStorage.clear();
alert("全部数据被清除");
loadStorage(\'msg\');
}
效果：
以上是关于web storage 简单的网页留言版的主要内容，如果未能解决你的问题，请参考以下文章
Web Storage API ： LocalStroage
HTML5期末大作业：餐饮美食网站设计——咖啡(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 咖啡网页设计 美食餐饮网页设计...(代码片段