实现一个便签功能，可以记录内容和写的时间，当网页从新载入，可以读取以前的记录。

html文档

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>simple note</title>

     <script type="text/javascript"src="comment.js"></script>

 </head>

 <body>

     <h1>add note</h1>

     <textarea id="content" cols="60" rows="2"></textarea><br/><!--文本输入区域-->

     <input type="button" value="save" onclick="saveStorage('content');">

     <input type="button" value="load" onclick="loadStorage('msg');">

     <input type="button" value="clear" onclick="clearStorage('msg');">

     <h1>note</h1>

     <hr>

     <p id="msg"></p><!--便签记录区域-->

 </body>

 </html>

js

 function saveStorage(id){

     var data = document.getElementById(id).value;//这里id为文本输入区域的content，获取了输入内容，存入data

     var timeNow = new Date();//获取时间

     localStorage.setItem(timeNow,data);//以时间作为键值

     localStorage.setItem(timeNow+1,timeNow);//将写便签的时间也存到localStorage

     loadStorage('msg');//这里的id为便签记录区域的msg,将本地储存的内容写入到id为msg的区域

 }

 function loadStorage(id){

     var result = '<table border = "1">';//result将包含一个记录着便签的表，将存入id为msg的便签记录区域

     for(var i=0,j=1;i<localStorage.length;i+=2,j++)//可见，localStorage的key键值为数组，按照存入顺序，0键值为内容，1键值为时间，3键值为内容，以此类推

     {

         var key = localStorage.key(i);//获取内容的键值

         var value = localStorage.getItem(key);var time = localStorage.getItem(key+1);//根据键值获取内容和时间，根据html，时间的键值比内容大1（这里说的是值，不是键值数组下标）
         result += '<tr><td>'+j+'</td><td>'+value+'</td><td>'+time+'</td></tr>';

     }

     result += '</table>';//添加表结束标记

     var target = document.getElementById(id);//利用DOM方法获取id为msg的便签记录元素，存入一个变量

     target.innerHTML = result;//利用htmlDOM方法，将id为msg的便签记录元素的子节点内容变为result

 }

 function clearStorage(id){

     localStorage.clear();//清楚本地储存

     alert("date deleted");

 }

利用html5的localStorage做一个备忘录的更多相关文章

  1. 利用HTML5 与CSS3 做的放大镜

    利用HTML5 与CSS3 做的放大镜 html结构 <div class="wrap"> <div class="move"> < ...

  2. 利用@keyframe及animation做一个页面Loading时的小动画

    前言 利用@keyframe规则和animation常用属性做一个页面Loading时的小动画. 1  @keyframe规则简介 @keyframes定义关键帧,即动画每一帧执行什么. 要使用关键帧 ...

  3. 用HTML5的canvas做一个时钟

    对于H5来说,canvas可以说是它最有特色的一个地方了,有了它之后我们可以随意的在网页上画各种各样的图形,做一些小游戏啊什么的.canvas这个标签的用法,在网上也有特别多的教程了,这里就不作介绍了 ...

  4. 利用JS跨域做一个简单的页面访问统计系统

    其实在大部分互联网web产品中,我们通常会用百度统计或者谷歌统计分析系统,通过在程序中引入特定的JS脚本,然后便可以在这些统计系统中看到自己网站页面具体的访问情况.但是有些时候,由于一些特殊情况,我们 ...

  5. 利用JS跨域做一个简单的页面訪问统计系统

    事实上在大部分互联网web产品中,我们一般会用百度统计或者谷歌统计分析系统,通过在程序中引入特定的JS脚本,然后便能够在这些统计系统中看到自己站点页面详细的訪问情况.可是有些时候,因为一些特殊情况,我 ...

  6. 利用高德地图javascriptAPI做一个自己的地图

    最近由于项目中需要制作一个地图,用来选择活动地点,我就花了两天利用高德地图的javascriptAPI自制了一个地图的demo.在这了记录一下我学习的过程. 一.进入高德地图官网,再找到高德地图的开放 ...

  7. js利用点击事件做一个简单的计算器

    先放一个样式图: 源代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  8. 在Jenkins上做一个定时闹钟

    [本文出自天外归云的博客园] 利用Jenkins定时任务来做一个闹钟,每天隔一段时间提醒自己一下“你该休息了!别老坐着!出去走一走!珍爱生命,远离久坐!” 首先在Jenkins上创建一个node. 创 ...

  9. 利用html5中的localStorage获取网页被访问的次数

    利用html5中的localStorage获取网页被访问的次数 <!DOCTYPE html> <html> <head> <meta charset=&qu ...

随机推荐

  1. HTML5和CSS3的一些新特性

    html5有哪些新特性.移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5? 新特性: 1. 拖拽释放(Drag and drop) 2. 语义化更好的内容标 ...

  2. Dotspatial 创建面状图层

    using DotSpatial.Controls;using DotSpatial.Data;using DotSpatial.Data.Forms;using DotSpatial.Plugins ...

  3. 如何处理C#的HttpWebResponse的GetResponse中的超时异常

    程序中,有时会遇到超时的异常,需要进行处理,用一般的try...catch(Exception ex)...会发现ex没有status属性,此时使用WebException捕获异常: try { re ...

  4. java之DatagramSocket、DatagramPackage丶MulticastSocket 广播学习

    1.基本概念: a.DatagramPacket与DatagramSocket位于java.net包中 b.DatagramPacket表示存放数据的数据报,DatagramSocket表示接受或发送 ...

  5. 软件测试第四周--关于int.parse()的类型转换问题

    先来归纳一下我们用过的所有类型转换方法: 1. 隐式类型转换,即使用(int) 直接进行强制类型转换.这种方法的优点是简单粗暴,直接指定转换类型,没有任何保护措施,所以也很容易抛出异常导致程序崩溃.当 ...

  6. 探索javascript----事件对象下的各种X和Y

    每次用到诸如client,screen,offset等,虽然通常都是能用对的,但是总觉得不是那么的自信没错.所以整理一下可以再需要的时候来查阅. 一:clientX和clientY,screenX和s ...

  7. String类和StringBuffer类的区别

    首先,String和StringBuffer主要有2个区别: (1)String类对象为不可变对象,一旦你修改了String对象的值,隐性重新创建了一个新的对象,释放原String对象,StringB ...

  8. Adaboost 算法

    一 Boosting 算法的起源 boost 算法系列的起源来自于PAC Learnability(PAC 可学习性).这套理论主要研究的是什么时候一个问题是可被学习的,当然也会探讨针对可学习的问题的 ...

  9. GnuRadio Hacking②：使用SDR嗅探北欧芯片无线键盘鼠标数据包

    0×00 前言 上半年的时候安全公司Bastille Networks(巴士底狱)安全研究员发现大多数无线鼠标和接收器之间的通信信号是不加密的,黑客可对一两百米范围内存在漏洞的无线键鼠进行嗅探甚至劫持 ...

  10. 排球积分规则功能说明书（spec）

    排球规则: 由技术性规定.非技术性规定和场地设备要求等方面的内容组成的.每场比赛仍为五局三胜,前四局每局先得25分为胜,第五局先得15分者为胜.当出现24平或14平时,要继续比赛至领先2分才能取胜. ...