本篇文章主要给大家介绍一个非常简单的HTML留言板及html 留言列表样式的相关代码操作。留言板是一些门户网站或者论坛等等必不可少的一部分。

HTML留言板具体代码示例如下：

网页留言板版源码示例

简易留言板

---

function saveStorage(id) {

var data = document.getElementById(id).value;

var time = new Date().getTime();

localStorage.setItem(time,data);

console.log("数据已保存");

loadStorage('msg');

}

function loadStorage(id) {

var result = '

for(var i = 0; i < localStorage.length; i++) {

var kes = localStorage.key(i);

var value = localStorage.getItem(kes);

var date = new Date();

date.setTime(kes);

var datestr = date.toGMTString();

result += '

' + value + '' + datestr + ''

}

result += '

';

var target = document.getElementById(id);

target.innerHTML = result;

}

function clearStorage() {

localStorage.clear();

console.log("清除完毕");

}

上述HTML留言板效果如下图：

注：saveStorage() 获取textarea的value值

getTime()获取当前时间戳、setItem()将时间戳作为键值，textarea的value值作为键值的内容保存在本地数据库

localStorage:html5出现的新标签

html5本地存储

基本语句: window.localStorage;

获取: localStorage.getItem(key);

添加: localStorage.setItem(key,value);

修改: localStorage.key = "";

删除: localStorage.removeItem(key);

清除: localStorage.clear();

【相关文章推荐】

如何用php简单制作留言板

php实现留言板功能的代码详细介绍