xueqibuildxue
- 浏览: 773569 次
- 性别:
- 来自: 大连
-
文章分类
- 全部博客 (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 782<script> /* object.Open ... -
sessionStorage 、localStorage 和 cookie 之间的区别(转)
2013-02-20 16:00 887sessionStorage 和 localStorage ... -
html5本地存储 localStorage
2013-02-20 15:45 815<!DOCTYPE HTML> <html& ... -
myinfo
2013-02-20 09:40 0https://www.ibm.com/developerwo ... -
web.xml 中的listener、 filter、servlet 加载顺序及其详解
2013-01-21 15:05 742http://www.cnblogs.com/JesseV/a ... -
通过js闭包实现减少前后台交互的次数
2013-01-06 10:49 0应用场景：鼠标移到超链接时，会显示tip，而tip的内容来自后 ... -
js闭包的理解（转）
2013-01-06 10:38 859转自：http://www.cnblogs.com ... -
js闭包
2013-01-06 10:21 794http://www.jb51.net/article/241 ... -
js date对象
2012-12-28 14:28 1038Date 对象用于处理日期和时间。创建 Date 对象的语法： ... -
JS Date格式化为yyyy-MM-dd类字符串
2012-12-28 14:27 1162Date.prototype.format = functio ... -
js数组（转）
2012-12-11 11:38 990js数组的操作 用 js有很久了，但都没有深究过js的数组形式 ... -
js使用
2012-11-29 10:53 9061. js split <script language ... -
.NET 的 WCF 和 WebService 有什么区别?(转载)
2012-05-07 10:28 1767<h2> <a id="cb ... -
在线文档显示组件 FlexPaper
2011-12-19 14:24 1097FlexPaper 是一个开源轻量级的在浏览器上显示各种 ... -
Document Type Declaration
2011-12-08 15:22 2590Document Type Declaration From ... -
Doctype
2011-12-08 15:04 885DOCTYPE不可怕，但把它拿 ... -
XHTML 和 MIME 类型
2011-12-09 09:12 1105XHTML 和 MIME 类型 - 使用Web 标 ... -
xhtml DTD
2011-11-30 16:18 818XHTML 定义了三种文件类型声明。 使用最普遍的是 ... -
IIS配置
2011-11-17 13:18 791http://bbs.51cto.com/thread-488 ...
相关推荐
运用本地存储技术实现留言。实现留言，删除留言，等功能。有时间记录，可以作为自己的一个小便签非常方便。
NULL 博文链接：https://yuruei2000.iteye.com/blog/1489088
HTML静态网页留言板ASP自动代码， 解压到你的网站根目录即可guestbook/index.html 本程序是html显示，提交，实现了很多人想要的“html留言板” 本程序没有做登陆验证，请用户自己添加
31.简单的网页留言板26:36 32.video元素与audio元素的基础知识20:10 33.video元素与audio元素的常用属性32:18 34.HTML5拖放22:41 35.CSS3简介04:11 36.CSS3新增的属性选择器22:17 37.结构性伪类选择器上28:52 38....
1.3 HTML的基本结构 5 1.3.1 HTML文件的编写方法 5 1.3.2 文件开始标签<html> 7 1.3.3 文件头部标签<head> 7 1.3.4 文件标题标签<title> 7 1.3.5 文件主体标签<body> 7 1.3.6...
第8章 事件委托、时间操作、标签的可编辑属性、(本地存储) 和 JSON 格式 第9章 作业选讲、抽象化, 如何封装功能, 如何组织代码结构、变量命名的方法 第10章 HTTP 协议 和 AJAX、DOM 事件机制, 事件冒泡和事件捕获 第...
(3)使用BOM调用浏览器功能1次，例如页面滚动、秒杀倒计时、打印、通知、本地存储等。 (4)使用ECharts库(https://echarts.apache.org)实现数据可视化1次。使用Swiper框架(https://www.swiper.com.cn)实现轮播图1次。 ...
使用html,css,js等基本语言开发设计的一个网页，具有丰富的界面交互样式。包括名胜古迹风景的图片展示，也包括些叙述文字。同时还实现了留言板功能，使用本地的数据库对留言信息进行存储。
自行设置目标站分类映射本地分类（为防止出现错误请首先将分类映射填写好） 可选根据ID范围批量采集 可选根据ID列表批量采集（自定义手工输入或按照目标站列表页面截取） 可选是否强制更新（覆盖原有采集） 可选生成...
前端利用Ajax和后端进行数据交换，实现了注册和登陆的表单验证、数据存储以及留言板的评论功能；服务端采用了nodejs的express搭建了服务器，设置路由，配置了本地服务器环境；同时利用MongoDB建立了数据库.
6.3 本地文件的操作实例——小型留言本 96 6.3.1 留言发表模块 96 6.3.2 浏览模块 98 6.4 远程文件的操作实例 99 6.5 文件的上传与下载 99 6.5.1 文件的上传 99 6.5.2 文件的下载 100 6.6 小结 101 第7章 字符的处理...
数据库临时转文件本地储存架构，可以从根本降低数据库的读写压力，提高网站整体访问与反应速度（使用得当，此功能完全优于生成HTML功能）；支持application等常规缓存技术，可在后台选择，依据自身运行服务器的能力...
8、 网站上传的图片、附件、视频等资源支持本地存储、阿里云对象存储、腾讯云对象存储，有利于减少带宽和分散服务器的压力，提交用户体验; 9、 进一步区分各个站点的数据，包括订单、会员等信息，重点打造移动平台、...
我们将用作留言板，并且几乎将所有沟通保持公开状态。 如果出于任何原因您需要私下联系组织者，则可以直接与我们联系。 团队 布莱恩·休斯（Bryan Hughes）， 费尔南多· 托马斯·亨特二世（Thomas Hunter II），...
【GB2转BIG5】 将选中区域存储格的简体字（GB2）批量转换成繁体操作系统的繁体（BIG5）。 【BIG5转GB2】 将选中区域存储格的繁体字（BIG5）批量转换成简体操作系统的简体（GB2）。 完 美 背 景 着 色 【选区背景】...
9、OSS管理添加appkey_secretId后台未解密导致数据存储错误 10、会员中心留言列表报错 11、工作流节点空值处理 12、手机模板在静态页生成的情况下url错误处理 13、新增百度主动推送 14、内容删除同时删除...
数据库临时转文件本地储存架构，可以从根本降低数据库的读写压力，提高网站整体访问与反应速度（使用得当，此功能完全优于生成HTML功能）； 支持application等常规缓存技术，可在后台选择，依据自身运行服务器的...