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

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. Add Two Numbers (c#)

    You are given two linked lists representing two non-negative numbers. The digits are stored in rever ...

  2. 使用Mulesoft建立webservice, jax-ws方式, wsdl first

    先创建wsdl,然后生成class 1. 下载 HRData.xsd 和 HRDataService.wsdl http://yunpan.cn/Q4zBXC4fvC74xhttp://yunpan. ...

  3. 野心勃勃的React组件生命周期

    当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件    React实现了UI=Fn(St ...

  4. IOS设置导航栏字体大小及颜色

    方法一: 自定义视图,定义一个lable,相关属性在lable里设置 核心方法: self.navigationItem.titleView = titleLabel; 方法二:用系统方法直接设置 [ ...

  5. mysql配置文件编写

    实例: 首先建立 mysql的配置文件 dbconfig.php <?php $phpexcel=array( "host"=>'localhost',//127.0. ...

  6. 类似qq的左滑菜单栏简单实现

    代码托管到了Github https://github.com/cyuanyang/YYSlideView 主演实现代码: 1.滑动的viewController的初始化主要view -(instan ...

  7. Controller的创建

    在ControllerBuilder类中设置ControllerFactory,然后使用ControllerFactory创建Controller. http请求在进入httphandler映射处理时 ...

  8. 总结:视频播放的四种实现方案(Native)

    一.来自 AVFoundation的 AVPlayer对象 特点: 1. AVPlayer     > 优点:          可以自定义UI, 进行控制     > 缺点:      ...

  9. 捉虫记（四）线程安全导致的HighCpu

    一个朋友QQ群里说网站启动后会cpu很高,想要帮忙看一下dump. 1．打开windbg加载dump文件后第一个命令lmf,这个命令显示加载的dll以及路径,这样子可以找个dll来帮忙加载sos,(额 ...

  10. redis基础总结

    Redis 数据类型: String Hash String类型: 一个key对应一个value,二进制安全的. set方法:设置对应值的value set name value get方法:获取对应 ...