UDN-企业互联网技术人气社区

板块导航

浏览  : 3830
回复  : 1

[HTML5] JS API-本地存储 简单的Web留言板

[复制链接]
友美C_cup的头像 楼主
发表于 2015-7-11 01:57:46 | 显示全部楼层 |阅读模式
    今天我们来一个实战练习,使用HTML5/CSS3来制作一个简单的!效果图如下:

    JavaScript 本地储存 实现代码

    sessionStorage和LocalStorage:的键值,我们可以通过getItem(键)来直接获取,还可以直接通过key(索引)来获取键名,在根据键名获取数据,例如localStorage.getItem(localStorage.key(索引)),当然,索引与数组一样,都是从0开始计数。

    下面我们来看一下留言板完整的JS代码实现:当然,你关闭浏览器后(只要不清空缓存),再次打开,这些数据还是存在的!


  1. <script type="text/javascript">
  2. var Storage =
  3. {
  4.         saveData:function()//保存数据
  5.         {
  6.                 var data = document.querySelector("#post textarea");
  7.                 if(data.value != "")
  8.                 {
  9.                         var time = new Date().getTime() + Math.random() * 5;//getTime是Date对象中的方法,作用是返回 1970年01月01日至今的毫秒数
  10.                         localStorage.setItem(time, data.value + "|" + this.getDateTime());//将毫秒数存入Key值中,可以降低Key值重复率
  11.                         data.value = "";
  12.                         this.writeData();
  13.                 }
  14.                 else
  15.                 {
  16.                         alert("请填写您的留言!");
  17.                 }
  18.         },
  19.         writeData:function()//输出数据
  20.         {
  21.                 var dataHtml = "", data = "";
  22.                 for(var i = localStorage.length-1; i >= 0; i--)//效率更高的循环方法
  23.                 {
  24.                         data = localStorage.getItem(localStorage.key(i)).split("|");
  25.                         dataHtml += "<p><span class=\"msg\">" + data[0] + "</span><span class=\"datetime\">" + data[1] + "</span></p>";
  26.                 }
  27.                 document.getElementById("comment").innerHTML = dataHtml;
  28.         },
  29.         clearData:function()//清空数据
  30.         {
  31.                 if(localStorage.length > 0)
  32.                 {
  33.                         if(window.confirm("清空后不可恢复,是否确认清空?"))
  34.                         {
  35.                                 localStorage.clear();
  36.                                 this.writeData();
  37.                         }
  38.                 }
  39.                 else
  40.                 {
  41.                         alert("没有需要清空的数据!");
  42.                 }
  43.         },
  44.         getDateTime:function()//获取日期时间,例如 2012-03-08 12:58:58
  45.         {
  46.                 var isZero = function(num)//私有方法,自动补零
  47.                 {
  48.                         if(num < 10)
  49.                         {
  50.                                 num = "0" + num;
  51.                         }
  52.                         return num;
  53.                 }
  54.                
  55.                 var d = new Date();
  56.                 return d.getFullYear() + "-" + isZero(d.getMonth() + 1) + "-" + isZero(d.getDate()) + " " + isZero(d.getHours()) + ":" + isZero(d.getMinutes()) + ":" + isZero(d.getSeconds());
  57.         }            
  58. }

  59. window.onload = function()
  60. {
  61.         Storage.writeData();//当打开页面的时候,先将localStorage中的数据输出一边,如果没有数据,则输出空
  62.         document.getElementById("postBt").onclick = function(){Storage.saveData();}//发表评论按钮添加点击事件,作用是将localStorage中的数据输出
  63.         document.getElementById("clearBt").onclick = function(){Storage.clearData();}//清空所有已保存的数据
  64. }
  65. </script>


复制代码
xHTML结构.png (8.87 KB, 下载次数: 0)
xHTML结构.png

CSS结构如下

CSS结构如下

CSS结构如下


web留言板.png
拓展阅读 >>>


相关帖子

发表于 2015-9-17 15:28:56 | 显示全部楼层
路过 帮顶 嘿嘿
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部