xueqibuildxue
- 浏览: 793923 次
- 性别:
- 来自: 大连
-
文章分类
- 全部博客 (417)
- ASP.NET MVC (18)
- WEB基础 (24)
- 数据库 (69)
- iPhone (20)
- JQuery (3)
- Android (21)
- UML (8)
- C# (32)
- 移动技术 (19)
- 条码/RFID (6)
- MAC (8)
- VSS/SVN (6)
- 开卷有益 (4)
- 应用软件 (1)
- 软件工程 (1)
- java/Eclipse/tomcat (61)
- 英语学习 (2)
- 综合 (16)
- SharePoint (7)
- linux (42)
- Solaris/Unix (38)
- weblogic (12)
- c/c++ (42)
- 云 (1)
- sqlite (1)
- FTp (2)
- 项目管理 (2)
- webservice (1)
- apache (4)
- javascript (3)
- Spring/Struts/Mybatis/Hibernate (4)
- 航空业务 (1)
- 测试 (6)
- BPM (1)
最新评论
-
dashengkeji：
1a64f39292ebf4b4bed41d9d6b21ee7 ...
使用POI生成Excel文件，可以自动调整excel列宽等（转） -
zi_wu_xian：
PageOffice操作excel也可以设置表格的行高列宽，并 ...
使用POI生成Excel文件，可以自动调整excel列宽等（转） -
wanggang0321：
亲，我在pptx（office2007以上版本）转pdf的时候 ...
JODConverter]word转pdf心得分享（转） -
xiejanee：
楼主：你好！我想请问下 你在代码中用DOMDocument* ...
Xerces-C++学习之——查询修改XML文档 (转)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>HTML5每日一练之JS API-本地存储LocalStorage 留言板 | 前端开发网(W3Cfuns.com)！</title>
<script type="text/javascript">
var Storage =
{
saveData:function()//保存数据
{
var data = document.querySelector("#post textarea");
if(data.value != "")
{
var time = new Date().getTime() + Math.random() * 5;//getTime是Date对象中的方法，作用是返回 1970年01月01日至今的毫秒数
localStorage.setItem(time, data.value + "|" + this.getDateTime());//将毫秒数存入Key值中，可以降低Key值重复率
data.value = "";
this.writeData();
}
else
{
alert("请填写您的留言！");
}
},
writeData:function()//输出数据
{
var dataHtml = "", data = "";
for(var i = localStorage.length-1; i >= 0; i--)//效率更高的循环方法
{
data = localStorage.getItem(localStorage.key(i)).split("|");
dataHtml += "<p><span class=\"msg\">" + data[0] + "</span><span class=\"datetime\">" + data[1] + "</span></p>";
}
document.getElementById("comment").innerHTML = dataHtml;
},
clearData:function()//清空数据
{
if(localStorage.length > 0)
{
if(window.confirm("清空后不可恢复，是否确认清空？"))
{
localStorage.clear();
this.writeData();
}
}
else
{
alert("没有需要清空的数据！");
}
},
getDateTime:function()//获取日期时间，例如 2012-03-08 12:58:58
{
var isZero = function(num)//私有方法，自动补零
{
if(num < 10)
{
num = "0" + num;
}
return num;
}
var d = new Date();
return d.getFullYear() + "-" + isZero(d.getMonth() + 1) + "-" + isZero(d.getDate()) + " " + isZero(d.getHours()) + ":" + isZero(d.getMinutes()) + ":" + isZero(d.getSeconds());
}
}
window.onload = function()
{
Storage.writeData();//当打开页面的时候，先将localStorage中的数据输出一边，如果没有数据，则输出空
document.getElementById("postBt").onclick = function(){Storage.saveData();}//发表评论按钮添加点击事件，作用是将localStorage中的数据输出
document.getElementById("clearBt").onclick = function(){Storage.clearData();}//清空所有已保存的数据
}
</script>
</head>
<body>
<div id="content">
<div id="post">
<textarea class="transition"></textarea>
<input id="postBt" type="button" value="发表评论"/>
<input id="clearBt" type="button" value="清空所有已保存的数据"/>
</div>
<div id="comment"></div>
</div>
</body>
</html>
<html>
<head>
<meta charset="gb2312">
<title>HTML5每日一练之JS API-本地存储LocalStorage 留言板 | 前端开发网(W3Cfuns.com)！</title>
<script type="text/javascript">
var Storage =
{
saveData:function()//保存数据
{
var data = document.querySelector("#post textarea");
if(data.value != "")
{
var time = new Date().getTime() + Math.random() * 5;//getTime是Date对象中的方法，作用是返回 1970年01月01日至今的毫秒数
localStorage.setItem(time, data.value + "|" + this.getDateTime());//将毫秒数存入Key值中，可以降低Key值重复率
data.value = "";
this.writeData();
}
else
{
alert("请填写您的留言！");
}
},
writeData:function()//输出数据
{
var dataHtml = "", data = "";
for(var i = localStorage.length-1; i >= 0; i--)//效率更高的循环方法
{
data = localStorage.getItem(localStorage.key(i)).split("|");
dataHtml += "<p><span class=\"msg\">" + data[0] + "</span><span class=\"datetime\">" + data[1] + "</span></p>";
}
document.getElementById("comment").innerHTML = dataHtml;
},
clearData:function()//清空数据
{
if(localStorage.length > 0)
{
if(window.confirm("清空后不可恢复，是否确认清空？"))
{
localStorage.clear();
this.writeData();
}
}
else
{
alert("没有需要清空的数据！");
}
},
getDateTime:function()//获取日期时间，例如 2012-03-08 12:58:58
{
var isZero = function(num)//私有方法，自动补零
{
if(num < 10)
{
num = "0" + num;
}
return num;
}
var d = new Date();
return d.getFullYear() + "-" + isZero(d.getMonth() + 1) + "-" + isZero(d.getDate()) + " " + isZero(d.getHours()) + ":" + isZero(d.getMinutes()) + ":" + isZero(d.getSeconds());
}
}
window.onload = function()
{
Storage.writeData();//当打开页面的时候，先将localStorage中的数据输出一边，如果没有数据，则输出空
document.getElementById("postBt").onclick = function(){Storage.saveData();}//发表评论按钮添加点击事件，作用是将localStorage中的数据输出
document.getElementById("clearBt").onclick = function(){Storage.clearData();}//清空所有已保存的数据
}
</script>
</head>
<body>
<div id="content">
<div id="post">
<textarea class="transition"></textarea>
<input id="postBt" type="button" value="发表评论"/>
<input id="clearBt" type="button" value="清空所有已保存的数据"/>
</div>
<div id="comment"></div>
</div>
</body>
</html>
分享到：
发表评论
-
ie firefox 读取文件
2013-02-21 11:09 0<!DOCTYPE HTML PUBLIC " ... -
js读写文件
2013-02-21 10:49 809<script> /* object.Open ... -
sessionStorage 、localStorage 和 cookie 之间的区别(转)
2013-02-20 16:00 922sessionStorage 和 localStorage ... -
html5本地存储 localStorage
2013-02-20 15:45 846<!DOCTYPE HTML> <html& ... -
myinfo
2013-02-20 09:40 0https://www.ibm.com/developerwo ... -
web.xml 中的listener、 filter、servlet 加载顺序及其详解
2013-01-21 15:05 790http://www.cnblogs.com/JesseV/a ... -
通过js闭包实现减少前后台交互的次数
2013-01-06 10:49 0应用场景：鼠标移到超链接时，会显示tip，而tip的内容来自后 ... -
js闭包的理解（转）
2013-01-06 10:38 898转自：http://www.cnblogs.com ... -
js闭包
2013-01-06 10:21 859http://www.jb51.net/article/241 ... -
js date对象
2012-12-28 14:28 1066Date 对象用于处理日期和时间。创建 Date 对象的语法： ... -
JS Date格式化为yyyy-MM-dd类字符串
2012-12-28 14:27 1192Date.prototype.format = functio ... -
js数组（转）
2012-12-11 11:38 1022js数组的操作 用 js有很久了，但都没有深究过js的数组形式 ... -
js使用
2012-11-29 10:53 9751. js split <script language ... -
.NET 的 WCF 和 WebService 有什么区别?(转载)
2012-05-07 10:28 1793<h2> <a id="cb ... -
在线文档显示组件 FlexPaper
2011-12-19 14:24 1127FlexPaper 是一个开源轻量级的在浏览器上显示各种 ... -
Document Type Declaration
2011-12-08 15:22 2633Document Type Declaration From ... -
Doctype
2011-12-08 15:04 918DOCTYPE不可怕，但把它拿 ... -
XHTML 和 MIME 类型
2011-12-09 09:12 1134XHTML 和 MIME 类型 - 使用Web 标 ... -
xhtml DTD
2011-11-30 16:18 853XHTML 定义了三种文件类型声明。 使用最普遍的是 ... -
IIS配置
2011-11-17 13:18 848http://bbs.51cto.com/thread-488 ...
相关推荐
HTML5引入了两种新的本地存储机制——`localStorage`和`sessionStorage`，它们为Web应用提供了更大的存储空间，并且数据只存在于用户本地浏览器中，不会随着HTTP请求发送到服务器，从而提高了应用性能和安全性。...
运用本地存储技术实现留言。实现留言，删除留言，等功能。有时间记录，可以作为自己的一个小便签非常方便。
8. **API调用**：如果留言板需要保存和加载数据，可能需要用到微信提供的API，如`wx.request()`进行网络请求，将数据存储到服务器，或者`wx.getStorageSync()`和`wx.setStorageSync()`用于本地存储。 9. **生命周期...
总结来说，这个"网页留言板[HTML5]"项目涵盖了HTML5的基础语法和新特性，如语义化标签、增强的表单控件以及本地存储。同时，结合ASP技术，展示了前后端交互的基本流程。对于网页开发新手来说，这是一个很好的学习和...
总之，"php-留言板习作"是一个基础的PHP开发练习，涵盖了动态网站开发的核心概念，包括PHP编程、数据库操作、HTML表单处理以及用户交互。通过实践这个项目，开发者可以提升自己的Web开发技能，并对PHP和数据库管理有...
在这个“数组_本地留言板_H5数组例题_数组练习_”的主题中，我们将深入探讨数组的概念、H5（HTML5）中的数组应用以及相关的练习题。 首先，我们来看数组的基本概念。数组是编程语言中的一种数据结构，它由固定数量...
考虑到文件名为“相当很简易的留言板”，这可能是一个静态文件，包含了HTML、CSS和JavaScript代码，没有后端服务器支持，通过本地存储或者cookies模拟登录状态和数据保存。 在安全性方面，由于涉及用户信息，必须...
1. **数据存储**：留言板上的所有留言需要被存储以便后续查看。这通常通过数据库实现，如MySQL或SQLite。每个留言记录应包含发帖人、时间戳、内容等信息。 2. **前端界面**：用户通过网页与留言板交互。这个界面...
4. **API调用**：微信小程序提供了丰富的内置API，包括网络请求、用户信息获取、本地存储、地图、媒体等。例如，在留言板应用中，可能需要使用`wx.request`进行网络通信，向服务器发送留言数据。 5. **状态管理**：...
为了部署和运行这个留言板，你需要以下步骤： 1. **安装Smarty**：确保你的服务器环境中已经安装了PHP，并下载Smarty库。 2. **配置Smarty**：设置Smarty的路径、缓存目录等。 3. **创建数据库和表**：根据应用的...
- 数据持久化：使用本地存储或后端数据库保存留言。 - 用户验证：添加登录注册功能，确保只有已登录用户才能留言。 - 表单验证：使用AngularJS的内置验证机制，确保输入有效。 - 美化界面：利用CSS和Bootstrap等库...
标题 "dreamweaver留言板源代码" 提供了一个关键线索，即这个程序是使用Adobe Dreamweaver这个集成开发环境（IDE）创建的。Dreamweaver是一款广泛使用的工具，它支持多种编程语言，包括HTML、CSS、JavaScript以及...
在提供的文件列表中，“留言板”可能是包含ASP和HTML代码的文件，包含了留言板的完整实现。这个文件可能包括HTML结构、ASP代码段以及内联或外部引用的JavaScript代码。通过查看和分析这个文件，我们可以更深入地了解...
然而，实际的留言板应用通常会使用数据库（如MySQL）来存储和管理数据，提供更高效、安全和可扩展的解决方案。 在实践中，你可能还需要考虑一些其他因素，如错误处理、数据校验、安全性（如XSS和CSRF防护）以及用户...
7. **文件上传**：如果留言板支持图片或文件上传，那么需要处理文件I/O和上传逻辑，可能使用了Servlet的`Part`接口以及文件存储策略，如存储在本地文件系统、云存储服务或数据库BLOB字段中。 8. **错误和异常处理**...
【Dreamweaver 留言板代码】是一个关于使用Adobe Dreamweaver MX创建网页互动功能的教程，主要涉及如何在本地环境中建立站点并创建简单的网页。Dreamweaver是一款流行的网页设计和开发工具，提供了多种工作区布局以...
HTML静态网页留言板ASP自动代码， 解压到你的网站根目录即可guestbook/index.html 本程序是html显示，提交，实现了很多人想要的“html留言板” 本程序没有做登陆验证，请用户自己添加
- **本地存储**：若不涉及服务器，可以使用浏览器的`localStorage`或`sessionStorage`保存用户提交的留言，但数据仅限于单个浏览器。 - **AJAX通信**：如果要将数据发送到服务器并持久化存储，可以使用...
【标题】：“jsp 留言板”是一个基于Java服务器页面技术（JSP）开发的交互式应用，专为用户...发布项目时，Eclipse可以将编译后的文件部署到本地或远程服务器，使得其他人可以通过Web浏览器访问并使用这个留言板应用。
15. **国际化与本地化**：支持多种语言的留言板需要考虑字符串资源的管理。 16. **缓存技术**：对于高访问量的留言板，使用缓存技术可以减少数据库压力。 17. **数据备份与恢复**：定期备份留言板数据，以防意外...