使用 HTML5 实现本地存储——小例子:简易留言板

学习笔记 马富天 2017-06-15 20:15:01 96 0

【摘要】本文介绍如何使用 html5 实现本地存储,并给出一个小例子:留言板。

二话不说,直接给出源代码,含有注释,运行效果如下图所示:

请输入图片名称
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <h1>简易留言板</h1>
  9.         <textarea id="memo" cols="60" rows="10"></textarea>
  10.         <input type="button" value="追加内容" onclick="saveStorage('memo')" />
  11.         <input type="button" value="初始化" onclick="clearStorage('msg')" />
  12.         <hr />
  13.         <p id="msg"></p>
  14.         <script type="text/javascript">
  15.             function saveStorage(id) {
  16.                 //获取textarea的value值
  17.                 var data = document.getElementById(id).value;
  18.                 //获取当前时间戳
  19.                 var time = new Date().getTime();
  20.                 //将时间戳作为键值,textarea的value值作为键值的内容保存在本地数据库
  21.                 localStorage.setItem(time,data);
  22.                 //保存成功后提示成功
  23.                 console.log("数据已保存");
  24.                 //设置loadStorage函数的传参(ID值)
  25.                 loadStorage('msg');
  26.             }
  27.             function loadStorage(id) {
  28.                 var result = '<table border="1">';
  29.                 //遍历本地数据所有内容
  30.                 for(var i = 0; i < localStorage.length; i++) {
  31.                     //获取每一条新增的键值
  32.                     var kes = localStorage.key(i);
  33.                     //获取新增键值的内容
  34.                     var value = localStorage.getItem(kes);
  35.                     //获取时间对象
  36.                     var date = new Date();
  37.                     //将时间戳转化为正常时间 Mon Jun 19 1972 11:12:44 GMT+0800 (中国标准时间) 的格式
  38.                     date.setTime(kes);
  39.                     //将转化后的内容变成字符串
  40.                     var datestr = date.toGMTString();
  41.                     //将所有新增内容添加到result变量中
  42.                     result += '<tr><td>' + value + '</td><td>' + datestr + '</td></tr>'
  43.                 }
  44.                 result += '</table>';
  45.                 var target = document.getElementById(id);
  46.                 //将所有内容添加到元素中显示
  47.                 target.innerHTML = result;
  48.             }
  49.             function clearStorage() {
  50.                 //清除本地储存所有内容
  51.                 localStorage.clear();  
  52.                 console.log("清除完毕");
  53.             }
  54.         </script>
  55.     </body>
  56. </html>

版权归 马富天PHP博客 所有

本文标题:《使用 HTML5 实现本地存储——小例子:简易留言板》

本文链接地址:http://www.mafutian.net/261.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

1

0

上一篇《 使用 jQuery 实现 checkbox 全选、全不选 》 下一篇《 使用原生 js/JavaScript 使用表单全选、全不选 》

暂无评论

评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码

TOP10

  • 浏览最多
  • 评论最多