HTML5 — Wed Storage简单示例
一、Wed Storage 概述
Wed Storage功能：在Wed上储存数据的功能，这里的储存是针对客户端本地而言的。
具体分为两种：
sessionStorage，将数据保存在session对象中。session是指用户在浏览某网站时，从进入网站到浏览器关闭所经过的这段时间，也是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的如何数据。
localStorage，将数据保存在客户端本地的硬件设备（硬盘）中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。
示例：
HTML5 内容
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script src="appWeb1.js"></script>
7 </head>
8 <body>
9 <p id="msg"></p>
10 <input type="text" id="input">
11 <input type="button" value="保存数据" onclick="saveStorage('input')">
12 <input type="button" value="读取数据" onclick="loadStorage('msg')">
13 </body>
14 </html>
appWeb1.js 部分
1 // function saveStorage(id) {
2 // var target = document.getElementById(id);
3 // var str = target.value;
4 // // 保存数据的方法key value
5 // sessionStorage.setItem("message",str);
6 // }
7 // function loadStorage(id) {
8 // var target = document.getElementById(id);
9 // 读取数据
10 // var msg = sessionStorage.getItem("message");
11 // target.innerHTML = msg;
12 // }
13 localStorage部分
14 function saveStorage(id) {
15 var target = document.getElementById(id);
16 var str = target.value;
17 localStorage.setItem("message",str);
18 }
19 function loadStorage(id) {
20 var target = document.getElementById(id);
21 var msg = localStorage.getItem("message");
22 target.innerHTML = msg;
23 }
二、 简单Wed留言本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Storage</title>
<script src="appWeb2.js"></script>
</head>
<body>
<h3>简易留言板</h3>
<textarea id="memo" cols="60" rows="10"></textarea><br/>
<input type="button" value="追加数据" onclick="saveStorage('memo')">
<input type="button" value="删除数据" onclick="clearStorage('msg')">
<hr/>
<p id="msg"></p>
</body>
</html>
appWeb2.js
function saveStorage(id) {
//获取textarea的value值
var data = document.getElementById(id).value;
//获取当前时间戳
var time = new Date().getTime();
//将时间戳作为键值，textarea的value值作为键值的内容保存在本地数据库
localStorage.setItem(time,data);
//保存成功后提示成功
alert("数据已保存");
//设置loadStorage函数的传参（ID值）
loadStorage('msg');
} function loadStorage(id) {
var result = '<table border="1">';
//遍历本地数据所有内容
for(var i = 0; i < localStorage.length; i++) {
//获取每一条新增的键值
var key = localStorage.key(i);
//获取新增键值的内容
var value = localStorage.getItem(key);
//获取时间对象
var date = new Date();
//将时间戳转化为正常时间 Mon Jun 19 1972 11:12:44 GMT+0800 (中国标准时间) 的格式
date.setTime(key);
//将转化后的内容变成字符串
var datestr = date.toGMTString();
//将所有新增内容添加到result变量中
result += '<tr><td>' + value + '</td><td>' + datestr + '</td></tr>'
}
result += '</table>';
var target = document.getElementById(id);
//将所有内容添加到元素中显示
target.innerHTML = result;
} function clearStorage() {
//清除本地储存所有内容
localStorage.clear();
alert("清除完毕");
}
显示效果：
三、本地存储——简易数据库
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易数据库</title>
<script src="appWeb3.js"></script>
</head>
<body>
<h3>使用Web Storage 实现简易数据库实例</h3>
<table>
<tr><td>姓名：</td><td><input type="text" id="name"></td></tr>
<tr><td>Email：</td><td><input type="text" id="email"></td></tr>
<tr><td>电话号码：</td><td><input type="text" id="tel"></td></tr>
<tr><td>备注：</td><td><input type="text" id="meno"></td></tr>
<tr><td></td><td><input type="button" value="保存" onclick="saveStorage()"></td></tr>
</table>
<hr>
<p>检索：
<input type="text" id="find">
<input type="button" value="检索" onclick="findStorage('msg')">
</p>
<p id="msg"></p>
</body>
</html>
//appWed3.js
function saveStorage() {
//创建一个对象，并将所有input的内容放到对象各属性中
var data = new Object;
data.name = document.getElementById("name").value;
data.email = document.getElementById("email").value;
data.tel = document.getElementById("tel").value;
data.meno = document.getElementById("meno").value;
//将对象中所有属性和值转换成JSON字符串格式
var str = JSON.stringify(data);
//以data对象中的name属性作为键值，打包后JSON数据作为内容保存到本地数据库中
localStorage.setItem(data.name,str);
//保存成功后显示提示
alert("数据已保存");
} function findStorage(id) {
//获取input框中输入的值
var find = document.getElementById('find').value;
//将获取到的值，通过键值查找键值下的内容
var str = localStorage.getItem(find);
//将查询到的内容从JSON字符串转换成JS对象
var data = JSON.parse(str);
//将对象中所有值，依次获取出来
var result = "姓名："+data.name+"<br/>";
result += "邮箱："+data.email +"<br/>";
result += "电话："+data.tel +"<br/>";
result += "备注："+data.meno +"<br/>";
var target = document.getElementById(id);
target.innerHTML = result;
}
显示效果：
HTML5 — Wed Storage简单示例的更多相关文章
- HTML5 worker计数器简单示例
效果图: index.html var w; // 开始 function startWorker() { if (typeof (Worker) !== "undefined") ...
- HTML5 Web Storage 特性
原文地址: Using HTML5 Web Storage 原文日期: 2010年06月28日 翻译日期: 2013年08月12日 当下Web开发领域最火爆的词语当属 HTML5.HTML5标准的新特 ...
- HTML5 Web Storage
Web Storage是HTML5 API提供一个新的重要的特性: 最新的Web Storage草案中提到,在web客户端可用html5 API,以Key-Value形式来进行数据持久存储: 目前主要 ...
- SignalR代理对象异常：Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论 SignalR 简单示例 通过三个DEMO学会SignalR的三种实现方式 SignalR推送框架两个项目永久连接通讯使用 SignalR 集线器简单实例2 用SignalR创建实时永久长连接异步网络应用程序
SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论 异常汇总:http://www ...
- TextKit简单示例
TextKit简单示例 效果 源码 https://github.com/YouXianMing/Animations // // TextKitLoadImageController.m // An ...
- Websocket - Websocket原理（握手、解密、加密）、基于Python实现简单示例
一.Websocket原理(握手.解密.加密) WebSocket协议是基于TCP的一种新的协议.WebSocket最初在HTML5规范中被引用为TCP连接,作为基于TCP的套接字API的占位符.它实 ...
- dubbo简单示例
dubbo简单示例 2019-09-06 1 Zookeeper注册中心的搭建(windows单机) 下载zookeeper压缩包并解压到 D:\zookeeper\apache-zookeeper- ...
- 【Canvas】(1)---概述+简单示例
Canvas---概述+简单示例 如果通俗的去理解Canvas,我们可以去理解成它类似于我们电脑自带的画图工具一样,canvas首先是选择一块画布,然后在这个画布上描绘我们想画的东西,画好后展示给用户 ...
- Linux下的C Socket编程 -- server端的简单示例
Linux下的C Socket编程(三) server端的简单示例 经过前面的client端的学习,我们已经知道了如何创建socket,所以接下来就是去绑定他到具体的一个端口上面去. 绑定socket ...
随机推荐
- 利用java反射机制编写solr通用的java客户端
一.前言 通过上一篇的讲解,我们知道了dynamicFiled字段,它是动态的,不需要显示的声明.而且一些常用的基本类型solr已经默认给我们创建好了. 例如:*_i,*_is,等. 如果我们要使用动 ...
- Dubbo高级特性实践-泛化调用
引言 当后端Java服务用Dubbo协议作为RPC方案的基础,但部分消费方是前端Restful的PHP服务,不能直接调用,于是在中间架设了Router服务提供统一的基于HTTP的后端调用入口. 而Ro ...
- org.apache.commons.beanutils.BeanMap简单使用例子
一.org.apache.commons.beanutils.BeanMap; 将一个java bean允许通过map的api进行调用, 几个支持的操作接口: Object get(Object ke ...
- VMwareTools安装失败提示找不到C headers和gcc目录
在VMware虚拟机上安装好linux系统后,发现往往不能全屏,也不能设置共享文件夹进行文件共享,这时候可以通过安装VMwareTools这个工具来实现文件拖拽.共享和全屏. 安装的过程不再赘述,关键 ...
- Java自学手记——接口
抽象类 1.当类和对象被abstract修饰符修饰的时候,就变成抽象类或者抽象方法.抽象方法一定要在抽象类中,抽象类不能被创建对象,如果需要使用抽象类中的抽象方法,需要由子类重写抽象类中的方法,然后创 ...
- 腾讯地图JS API实现带方向箭头的线路Polyline
最近产品提出一个需求,在我们使用的腾讯地图上为线路polyline添加线路方向.例如下图所示: 查找腾讯地图JS API提供的API,没有找到对应的支持,询问负责腾讯地图的人也得到了同样的答案,即地图 ...
- 关于 Eclipse中的Web项目 部署的文件位置 查看jsp源码的部署位置
使用 eclipse 开发web项目 会默认 部署在 工作目录下: .metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps 在这里 ...
- 如何禁用 .net reflector
在 工具--->扩展管理器-->禁用
- Linux 下搭建www服务器
偶然的机会接触了前端开发,尽管最初的意愿是后台. 不过现在看来,前端后台数据库密不可分! 回想起来感觉自己学习的层次也还很好,因为之前有学习c语言.c++的基础,所以在学习html,js的过程中感觉还 ...
- maven 打包时mapper.xml打不进去问题
首先,来看下MAVENx项目标准的目录结构: 一般情况下,我们用到的资源文件(各种xml,properites,xsd文件等)都放在src/main/resources下面,利用maven打包时,ma ...