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

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. Socket模块学习

    Socket是什么呢?     Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计模式中,Socket其实就是一个门面模式,它把复杂的TCP/IP协议族隐藏在Socke ...

  2. Windows Server 2003 IIS6.0+PHP5(FastCGI)+MySQL5环境搭建教程

    准备篇 一.环境说明: 操作系统:Windows Server 2003 SP2 32位 PHP版本:php 5.3.14(我用的php 5.3.10安装版) MySQL版本:MySQL5.5.25 ...

  3. C++虚函数和虚函数表

    前导 在上面的博文中描述了基类中存在虚函数时,基类和派生类中虚函数表的结构. 在派生类也定义了虚函数时,函数表又是怎样的结构呢? 先看下面的示例代码: #include <iostream> ...

  4. java获取日期 昨天 今天 明天的日期

    Date date=new Date();//取时间 Calendar calendar = new GregorianCalendar(); calendar.setTime(date); cale ...

  5. MVC 实体字段自定义验证

    [Remote("ActionName", "ControllerName", AdditionalFields = "ID", Error ...

  6. 把一个英语句子中的单词次序颠倒后输出。例如输入“how are you”，输出“you are how”；

    import java.util.Scanner; public class Test2 { public void reverse(String str) { String[] wordArray ...

  7. kafka 订单应用需求

    kafka的介绍就不说了,网上会找到一大堆. 为了公司做报表需要对卡券订单的销售情况做总结,所以每次下单的时候都要给卡券活动模块传递一次消息,并把订单的信息发送给活动,活动做相应的数据操作,因为数据量 ...

  8. Xcode下的批量编辑

    说明:目前为止我找到三种查找与替换功能,如果有更多的方式,请在下面留言 第一种:我们常用的查找以及查找与替换功能 在Windows下,使用Ctrl+f 快捷键查找.用Ctrl+h来进行查找与替换功能. ...

  9. 【RobotFramework自动化测试】数据库值验证

    ${sqlCount}    Row Count    ${sqlStr}    #注释:Row Count 将SQL查询结果的行数返回给前面的参数: @{rs}    query    ${sqlS ...

  10. ios9-通讯录

    在以往的ios开发中,开发者需要获取用户的通讯录信息的时候,往往要使用AddressBook.frame框架,该框架是纯C语言的API,在开发过程中,还需要开发者手动的管理内存,这对于新进开发者很难理 ...