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

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. 杭电ACM1002

    原题:http://acm.hdu.edu.cn/showproblem.php?pid=1002 #include <stdio.h> #include <string.h> ...

  2. http 301和302的区别

    1.什么是301转向?什么是301重定向? 301转向(或叫301重定向,301跳转)是当用户或搜索引擎向网站服务器发出浏览请求时,服务器返回的HTTP数据流中头信息(header)中的状态码的一种, ...

  3. SQL Server 2005中的CTE递归查询得到一棵树

    感觉这个CTE递归查询蛮好用的,先举个例子: use City; go create table Tree ( ID int identity(1,1) primary key not null, N ...

  4. Longest Substring Without Repeating Characters（Difficulty: Medium）

    题目: Given a string, find the length of the longest substring without repeating characters. Examples: ...

  5. Scrum领取任务

    这次主要讨论了产品的构造流程,怎么将任务分配到个人,讨论什么功能具体怎么实现,然后各自选取了任务. 在团队项目“广商百货”的SCRUM项目中我认领的任务是对登录功能的实现.现在还没正式开始,还在看书和 ...

  6. HTML DOM

    1.DOM方法 常用 getElementById()  返回带有指定 ID 的元素 getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组) ge ...

  7. mysql 查看数据库、表的基本命令

    1:show databases; 查看所有的数据库,等同于select schema_name from information_schema.schemata\G.\G 替换;,以纵向报表的形式输 ...

  8. uboot(二）: Uboot-arm-start.s分析

    声明:该贴是通过参考其他人的帖子整理出来,从中我加深了对uboot的理解,我知道对其他人一定也是有很大的帮助,不敢私藏,如果里面的注释有什么错误请给我回复,我再加以修改.有些部分可能还没解释清楚,如果 ...

  9. MFC绘图（转载）

    http://www.cppblog.com/bestcln/articles/83189.html 1 几何对象的结构和类 为了使用绘图函数,应该先了解绘图所用到的几种表示几何对象的结构和类.这些结 ...

  10. 使用Mybatis-Generator自动生成Dao、Model、Mapping代码

    1.所需jar包 mybatis-generator-core-1.3.2.jar mybatis-generator-core-1.3.2.jar 可以去http://mvnrepository.c ...