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

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. linux自动更新代码，打包发布

    1.安装svn yum install subversion 2.安装 maven 下载:百度云盘地址为 http://pan.baidu.com/s/1nuKQGjv 解压 tar -zxvf ap ...

  2. SQL Server 内置函数、临时对象、流程控制

    SQL Server 内置函数 日期时间函数 --返回当前系统日期时间 select getdate() as [datetime],sysdatetime() as [datetime2] getd ...

  3. Android开源框架：NineOldAndroid

    在android3.0以前的版本,要实现动画,一般是使用NineOldAndroid开源框架,之后,就可以直接使用android提供的animation API了. 仔细看过此开源框架后,可看出此框架 ...

  4. 解决ie6 fixed 定位以及抖动问题

    像你所遇到的问题一样, IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法.如果我们需要做某个元素始终位于浏览器的底部, ...

  5. java反射机制深入详解

    java反射机制深入详解  转自:http://www.cnblogs.com/hxsyl/archive/2013/03/23/2977593.html 一.概念 反射就是把Java的各种成分映射成 ...

  6. .NET微信模拟登录及{base_resp:{ret:-4,err_msg:nvalid referrer}}的解决办法

    12年的时候写了些关于微信开发的内容,当时看好这个东西,可惜当时腾讯开放的权限太少,之后的一年多时间没有太关注了. 现在又要重新开始微信开发的阵容了,微信只是个入口,微网站才是趋势. 我是个水货,所以 ...

  7. TE9手机微信场景

    HTML <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8& ...

  8. CxImage在VS2010下的配置

    http://blog.csdn.net/youzhuo/article/details/24601621 一.编译Cximage 1.在SourceForge上下载cximage702_full.7 ...

  9. 写简单游戏，学编程语言-python篇

    好吧, 首先得承认这个题目写的夸大了,人才菜鸟一枚,游戏相关编程也是知道点概念.但是本人对游戏开发比较感兴趣,相信大多数喜欢玩玩游戏,因为它给人确实带来很多乐趣,而编程语言的学习最少对于我来说比较乏味 ...

  10. SQL注入的常用函数和语句

    1.系统函数 version()   Mysql版本user()   数据库用户名database()    数据库名@@datadir   数据库路径@@version_compile_os   操 ...