利用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 ...
随机推荐
- Qt之C语言类型typedef a[]等
01:typedef类型:给类型起别名,typedef int d[5];定义了一个类型即一个5个int类型的数据.所以d c;的长度是就是4 * 10:
- linux安装jdk(以centos安装jdk1.7为例)
1准备工作: 1 虚拟机一台vmware12,安装64位centos 2 oracle官网下载jdk1.7-linux-x64.rpm 3 winscp将jdk传送到linux上面 2开始安装: 1 ...
- 解决Inno Setup制作中文安装包在非中文系统上显示乱码的问题
尼玛,好几个月没更新了.囧... 目前我司新的客户端开发已经接近尾声,该改的bug已经改完,该重构的地方也都差不多了.视觉效果也已经根据美工的样式改完了.所以,就差制作安装包了.正所谓万事俱备,只欠东 ...
- Power of Four（Difficulty: Easy）
题目: Given an integer (signed 32 bits), write a function to check whether it is a power of 4. Example ...
- 在WPF中获取DataGridTemplateColumn模板定义的内容控件
xaml格式描述: <DataGrid Name="dataGrid" Grid.Row="1" ItemsSource="{Binding}& ...
- 在VBA中新建工作簿
用程序计算数据,得到不同公司.不同项目的数据结果,最终还要将每个公司的数据结果放在各自的单独文件中.这就需要在vba中新建.保存excel文件.掌握几个东西就能很熟练了:1.要想保存在当前目录下,需要 ...
- html5/css学习笔记
请始终将正斜杠添加到子文件夹.假如这样书写链接:href="http://www.w3cschool.cc/html",就会向服务器产生两次 HTTP 请求.这是因为服务器会添加正 ...
- maven项目管理利器
一.maven介绍及环境搭建 maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建.报告和文档的软件项目管理工具. maven可以更有效的管理项目,也是一套功能强大的自动化管 ...
- SparkSQL读取Hive中的数据
由于我Spark采用的是Cloudera公司的CDH,并且安装的时候是在线自动安装和部署的集群.最近在学习SparkSQL,看到SparkSQL on HIVE.下面主要是介绍一下如何通过SparkS ...
- 如何在静态博客hexo中只显示摘要信息
默认情况下hexo博客(如本站)的首页显示的是完整的文章 – 而文章比较长的时候这无疑会带来诸多不遍. 那怎么样才能只显示个摘要呢? 方法说白了,其实很简单 – 只要加入一个<!-- more ...