利用html5的localStorage做一个备忘录
实现一个便签功能，可以记录内容和写的时间，当网页从新载入，可以读取以前的记录。
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做一个备忘录的更多相关文章
- 利用HTML5 与CSS3 做的放大镜
利用HTML5 与CSS3 做的放大镜 html结构 <div class="wrap"> <div class="move"> < ...
- 利用@keyframe及animation做一个页面Loading时的小动画
前言 利用@keyframe规则和animation常用属性做一个页面Loading时的小动画. 1 @keyframe规则简介 @keyframes定义关键帧,即动画每一帧执行什么. 要使用关键帧 ...
- 用HTML5的canvas做一个时钟
对于H5来说,canvas可以说是它最有特色的一个地方了,有了它之后我们可以随意的在网页上画各种各样的图形,做一些小游戏啊什么的.canvas这个标签的用法,在网上也有特别多的教程了,这里就不作介绍了 ...
- 利用JS跨域做一个简单的页面访问统计系统
其实在大部分互联网web产品中,我们通常会用百度统计或者谷歌统计分析系统,通过在程序中引入特定的JS脚本,然后便可以在这些统计系统中看到自己网站页面具体的访问情况.但是有些时候,由于一些特殊情况,我们 ...
- 利用JS跨域做一个简单的页面訪问统计系统
事实上在大部分互联网web产品中,我们一般会用百度统计或者谷歌统计分析系统,通过在程序中引入特定的JS脚本,然后便能够在这些统计系统中看到自己站点页面详细的訪问情况.可是有些时候,因为一些特殊情况,我 ...
- 利用高德地图javascriptAPI做一个自己的地图
最近由于项目中需要制作一个地图,用来选择活动地点,我就花了两天利用高德地图的javascriptAPI自制了一个地图的demo.在这了记录一下我学习的过程. 一.进入高德地图官网,再找到高德地图的开放 ...
- js利用点击事件做一个简单的计算器
先放一个样式图: 源代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- 在Jenkins上做一个定时闹钟
[本文出自天外归云的博客园] 利用Jenkins定时任务来做一个闹钟,每天隔一段时间提醒自己一下“你该休息了!别老坐着!出去走一走!珍爱生命,远离久坐!” 首先在Jenkins上创建一个node. 创 ...
- 利用html5中的localStorage获取网页被访问的次数
利用html5中的localStorage获取网页被访问的次数 <!DOCTYPE html> <html> <head> <meta charset=&qu ...
随机推荐
- IOS调用系统声音（键盘声音）
#import <AudioToolbox/AudioToolbox.h> AudioServicesPlaySystemSound(1106); 注:括号中为系统声音的id,详见 htt ...
- easyui tabs update后tab上关闭图标失效的解决方案
问题:使用easyui的tabs组件的时候,调用了tab的update方法,更新后的tab标签上的关闭图标失效 使用的js文件是1.3版本的jquery.easyui.min.js文件,通过读源文件发 ...
- 基本矩阵运算的Java实现
一: 矩阵的加法与减法 规则:矩阵的加法与减法要求两个矩阵的行列完全相等,方可以完成两个矩阵的之间的运算. 举例说明如下 二:矩阵的乘法 规则:矩阵的乘法要求两个矩阵符合A(mx k), B( ...
- Ext JS 4 老特征：statics 静态的变量和方法
l 一.静态的变量和静态的方法 [译文原创Learning Ext JS 4 第51页] Statics的方法只属于类本身,而不属于任何一个实例,这就决定了我们是在定义类的内部来用statics方 ...
- Android Studio 2.2.2 发布
Android Studio 2.2.2 发布了.包括 canary, dev, beta, and stable 这几个系列. 该版本修复了 Android Studio 2.2.1 中排名较前的b ...
- NSOperation的几种使用方式
1.NSInvocationOperation 创建NSInvocationOperation对象 - (id)initWithTarget:(id)target selector:(SEL)sel ...
- （转载）android炫酷实用的开源框架（UI框架）
可以实现一些场常用炫酷效果,包含android-lockpattern(图案密码解锁).Titanic(可以显示水位上升下降的TextView).Pull-to-Refresh.Rentals-And ...
- 第三次作业 GIThub操作
一.Git 客户端操作 1.在project文件夹初始化一个repository 2.添加并提交readme.txt 3.修改并查看状态 4.多次修改并提交 5.创建分支mv1并checkout至该分 ...
- Python基于websocket实时通信的实现—GoEasy
Python websocket实时消息推送 在这里我记录一下之前如何实现服务器端与客户端实时通信: 实现步骤如下: 1. 获取GoEasy appkey. 在goeasy官网上注册一个 ...
- C#的IPAddress IPEndPoint
以前觉得什么都能记住 翻一遍书就能去考试了,现在回过头来想一些东西,突然有种模糊的陌生感,应了那句好记性不如烂笔头.做笔记终归是利大于弊的.麻烦一点但是却受用. 突然想从头开始,看一些过去的书,补一些 ...