利用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 ...
随机推荐
- 也来说说C/C++里的volatile关键字
去年年底的样子,何登成写了一篇关于C/C++ volatile关键字的深度剖析blog(C/C++ Volatile关键词深度剖析).全文深入分析了volatile关键字的三个特性.这里不想就已有内容 ...
- centos7安装nginx
一般我们都需要先装pcre, zlib,前者为了重写rewrite,后者为了gzip压缩. 一:安装 pcre 1.下载地址:百度云盘 http://pan.baidu.com/s/1dFusO3v ...
- HBase的基本架构及其原理介绍
1.概述:最近,有一些工程师问我有关HBase的基本架构的问题,其实这个问题仅仅说架构是非常简单,但是需要理解.在这里,我觉得可以用HDFS的架构作为借鉴.(其实像Hadoop生态系统中的大部分组建的 ...
- jdk安装及环境变量配置
JDK是 Java 语言的软件开发工具包,主要用于移动设备.嵌入式设备上的java应用程序.JDK是整个java开发的核心,它包含了JAVA的运行环境,JAVA工具和JAVA基础的类库. jdk下载地 ...
- HDU2544 最短路dij
纯最短路. ///HDU 2544堆优化的最短路 #include <cstdio> #include <iostream> #include <sstream> ...
- jQuery.pager无刷新分页
刚刚学习前端的时候,需要一个无刷新的分页功能,找了一个不错的,大家也有很大分享,在这里写一个自己的部分代码,前后端都有,需要的小伙伴可以参考一下,代码不是完整的. 直接上伪代码<样式代码省略,部 ...
- vimperator setting records
vimperator confugration files :highlight Hint color:#000;background:rgb(250,230,150);border-radius:4 ...
- codeforces 734E（DFS,树的直径（最长路））
题目链接:http://codeforces.com/contest/734/problem/E 题意:有一棵黑白树,每次操作可以使一个同色连通块变色,问最少几次操作能使树变成全黑或全白. 思路:先进 ...
- selenium win7+selenium2.0+python环境搭建
- java文件编译及运行
1 配置环境变量 使用鼠标右击“我的电脑”->属性->高级->环境变量 系统变量->新建->变量名:JAVA_HOME 变量值:C:\Program Files (x86 ...