HTML5笔记3——Web Storage和本地数据库
Web Storage概述
在HTML5中,除了Canvas元素之外,另一个新增的非常重要的功能是可以再客户端本地保存数据的Web Storage功能,之前可以使用Cookies在客户端
保存诸如用户名等简单用户信息,但通过长期使用,人们发现使用Cookies存储永久数据存在几个问题。
- 大小:Cookies的大小被限制在4KB
- 带宽:Cookies是随HTTP失误一起被发送的,因此会浪费一部分发送Cookies时使用的带宽
- 复杂性:要正确的操纵Cookies是很困难的。
针对以上问题,HTML5中,重新提供了一中在客户端本地保存数据的功能,他就是Web Storage。
Web Storage功能。
顾名思义,Web Storage功能就是在Web上存储数据的功能,这里的存储是针对客户端本地而言的。具体分为两种:
sessionStorage:将数据保存在session对象中。session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏
览这个网站所花费的时间。session对象可以用来保存在这段时间内所要保存的任何数据。
localStorage:将数据保存在客户端本地的硬件设备(硬盘)中,即使浏览器被关闭了,该数据仍然存在,下一次打开浏览器访问网站时仍然可以
继续使用。localstorage 是通过键值对来存储的。
开发工具我使用HBuilder.exe
新建Test.html页面,代码如下:
<html> <head>
<title></title>
<meta charset="UTF-8" />
<script type="text/javascript">
function saveSessiontorage(id) {
var targat = document.getElementById(id);
var str = targat.value;
sessionStorage.setItem("msg", str);
} function getSessionStorage(id) {
var targat = document.getElementById(id);
var msg = sessionStorage.getItem("msg");
targat.innerHTML = msg;
} function saveLocalStorage(id) {
var targat = document.getElementById(id);
var str = targat.value;
localStorage.setItem("msg", str);
} function getLocalStorage(id) {
var targat = document.getElementById(id);
var msg = localStorage.getItem("msg");
targat.innerHTML = msg;
}
</script>
</head> <body>
<p id="msg"></p>
<input type="text" id="txt" />
<input type="button" value="存储数据" onclick="saveSessiontorage('txt')" />
<input type="button" value="读取数据" onclick="getSessionStorage('msg')" />
<p id="msg1"></p>
<p> <input type="text" id="txt1" /></p>
<input type="button" value="Local存储数据" onclick="saveLocalStorage('txt1')" />
<input type="button" value="Local读取数据" onclick="getLocalStorage('msg1')" />
</body> </html>
localStorage关闭浏览器之后再打开,读取数据依旧存在,而sessionStorage关闭浏览器之后再打开读取数据就不见了。
作为简单数据库来利用
将Web Storage作为简易数据库,如果能解决数据检索,对列进行管理,就可以将Web Storage作为数据库来利用了。
新建Register.html页面,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="application/javascript">
function addUser () {
var data=new Object;
data.name=document.getElementById("txtName").value;
data.phone=document.getElementById("txtPhone").value;
data.address=document.getElementById("txtAddress").value;
var str=JSON.stringify(data);
localStorage.setItem(data.name,str);
alert("注册成功");
}
function search (txt) {
var filed=document.getElementById(txt).value;
var str=localStorage.getItem(filed);
var data=JSON.parse(str);
var result="用户名:"+data.name+"</br>"+"电话:"+data.phone+"</br>"+"地址:"+data.address
document.getElementById("txtMsg").innerHTML=result;
}
</script>
</head>
<body>
<div>用户名:<input type="text" id="txtName" /></div>
<div>电话号码:<input type="text" id="txtPhone" /></div>
<div>地址:<input type="text" id="txtAddress" /></div>
<div><input type="button" value="注册" onclick="addUser()"></div>
<br />
<div>用户名:<input type="text" id="txtSearch"><input type="button" value="Search" onclick="search('txtSearch')"/></div>
<div id="txtMsg"></div>
</body>
</html>
HTML5 本地数据库
在HTML5中,大大丰富了客户端本地可以存储的内容,添加了很多功能将原本必须要保存在服务器上的数据转为保存在客户端本地,从而大大提高了Web应用程序性能,减轻了服务器的负担,使用Web时代重新回到了“客户端为重、服务器端为轻”的时代。在HTML5中内置了两种本地数据库,一种为SQLLite,一种为indexedDB。
用executeSql来执行查询
1.transaction.executeSql(sqlquery,[],dataHandler,errorHandler);
2.function dataHandler(transaction,results);
3.function errorHandler(transaction,errmsg);
4.rows.length获取记录的条数
新建SqlTest.html,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="application/javascript">
var db=openDatabase("mydb","1.0","test db",1024*100); //参数分别为:(数据库名称,版本号,描述,大小) 如果数据库不存在则创建
// db.transaction(function(tx) {
// tx.executeSql("")
// })
transaction.executeSql("CREATE TABLE IF NOT EXISTS MsgData(name TEXT,msg,TEXT,createtime INTERGER)",[],function(){},function(){});
//参数:(sql语句,sql参数数组,执行成功的回调函数,执行失败的回调函数)
</script>
</body>
</html>
HTML5 indexedDB数据库
在HTML5中,新增了一种被称为“indexedDB”的数据库,该数据库是一种存储在客户端本地的NoSQL数据库。
新建IndexedDBTest.html,代码如下:
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script type="application/javascript">
//统一IndexedDB在不同浏览器的实现
window.indexedDB = window.indexedDB ||
window.mozIndexedDB ||
window.webkitIndexedDB ||
window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction ||
window.webkitIDBTransaction ||
window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange ||
window.webkitIDBKeyRange ||
window.msIDBKeyRange; function connDB () {
var dbName="indexedDBTest";
var dbVersion=1;
var idb;
var dbConnect=indexedDB.open(dbName,dbVersion);
dbConnect.onsuccess=function (e) {
idb=e.target.result;
alert("数据库连接成功!")
}
dbConnect.onerror=function(e){
alert("数据库连接失败!");
}
}
</script>
</head> <body>
<input type="button" value="连接数据库" onclick="connDB()"/>
</body> </html>
数据库的版本更新
只是成功链接数据库,我们还不能执行任何数据操作,我们还应该创建相当于关系型数据库中数据表的对象仓库与用于检索数据的索引。
新建versionUpdate.html,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="application/javascript">
//统一IndexedDB在不同浏览器的实现
window.indexedDB = window.indexedDB ||
window.mozIndexedDB ||
window.webkitIndexedDB ||
window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction ||
window.webkitIDBTransaction ||
window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange ||
window.webkitIDBKeyRange ||
window.msIDBKeyRange; function VersionUpdate () {
var dbName="indexedDBTest";
var dbVersion=2;
var idb;
var dbConnect=indexedDB.open(dbName,dbVersion);
dbConnect.onsuccess=function (e) {
idb=e.target.result;
alert("数据库连接成功!")
}
dbConnect.onerror=function(e){
alert("数据库连接失败!");
}
dbConnect.onupgradeneeded=function(e){
idb=e.target.result;
var ts=e.target.transaction;
var oldVersion=e.oldVersion;
var newVersion=e.newVersion;
alert("数据库更新成功!旧版本号:"+oldVersion+"------新版本号:"+newVersion);
}
}
</script>
</head>
<body>
<input type="button" value="更新数据库" onclick="VersionUpdate()" />
</body>
</html>
创建对象仓库
对于创建对象仓库与索引的操作,我们只能在版本更新事务内部进行,因为在indexedDB API中不允许数据库中的对象仓库在同一个版本中发生改变。
新建createStorge.html,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="application/javascript">
//统一IndexedDB在不同浏览器的实现
window.indexedDB = window.indexedDB ||
window.mozIndexedDB ||
window.webkitIndexedDB ||
window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction ||
window.webkitIDBTransaction ||
window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange ||
window.webkitIDBKeyRange ||
window.msIDBKeyRange; function CreateStorge () {
var dbName="indexedDBTest";
var dbVersion=2;
var idb;
var dbConnect=indexedDB.open(dbName,dbVersion);
dbConnect.onsuccess=function (e) {
idb=e.target.result;
alert("数据库连接成功!")
}
dbConnect.onerror=function(e){
alert("数据库连接失败!");
}
dbConnect.onupgradeneeded=function(e){
idb=e.target.result;
var name="user";
var optionParams={keyPath:"userid",autoIncrement:false};
var store=idb.createObjectStore(name,optionParams);
alert("对象仓库创建成功!");
}
}
</script>
</head>
<body>
<input type="button" value="创建对象仓库" onclick="CreateStorge()" />
</body>
</html>
HTML5笔记3——Web Storage和本地数据库的更多相关文章
- html5中的Web Storage
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...
- HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)
1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是c ...
- HTML5中的Web Storage(sessionStorage||localStorage)理解与简单实例
Web Storage是什么? Web Storage功能,顾名思义,就是在Web上针对client本地储存数据的功能,详细来说Web Storage分为两种: sessionStorage: 将数据 ...
- 学习笔记:Web Storage API
Web Storage API 提供了存储机制,通过该机制,浏览器可以安全地存储键值对,比使用 cookie 更加直观. Web Storage 包含如下两种机制: sessionStorage 为每 ...
- Vue学习笔记【17】——配置本地数据库和数据接口API
先解压安装 PHPStudy; 解压安装 Navicat 这个数据库可视化工具,并激活: 打开 Navicat 工具,新建空白数据库,名为 dtcmsdb4; 双击新建的数据库,连接上这个空白数据库, ...
- HTML5 本地存储Web Storage简单了解
HTML5本地存储规范,定义了两个重要的API :Web Storage 和 本地数据库Web SQL Database. 本地存储Web Storage 实际上是HTML4的cookie存储机 ...
- html5本地存储(一)------ web Storage
在html5中与本地存储相关的两个相关内容:Web Storage 与本地数据库 web Storage存储机制是对html4中的cookie存储机制的一个改善.web Storage就是在web上 ...
- html5本地存储web storage的简单使用
html5的一个非常cool的功能,就是web storage,类似于之前的cookie,不过与之不同的是,web storage 拥有本地5兆的容量可以存储,而cookie却只有4K,这是完全不能比 ...
- HTML5 Web Storage -- 让Cookies看起来如此古老
转载 原文 在此两部分组成的系列中,我们将来看看HTML5 规范中最棒而且最有趣的特性之一的Web Storage.我们将看看Web Storage 和 Cookies的历史,并从考虑以下几点: *C ...
随机推荐
- 图文详解如何快捷搭建LNMP服务环境
上一篇与大家一起学习了下如何搭建LAMP环境的知识,今天小编再和大家分享下如何快捷地搭建LNMP环境,并搭建起一个网站.Nginx是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/S ...
- idea 集成sonarLint
1.目标 idea集成sonar的代码检查,实现可以在提交代码前就检查你的代码,而不是将代码提交之后,之后再去检查. Sonar可以从以下七个维度检测代码质量,而作为开发人员至少需要处理前5种代码质量 ...
- lua table表
lua table表 语法结构 创建一个 table 直接使用 "{}" 即可 table1 = {} -- 赋值 table1["name"] = " ...
- IEnumerable<T>和IQueryable<T>
建议29.区别LINQ查询中的IEnumerable<T>和IQueryable<T> LINQ查询方法一共提供了两类扩展方法,在System.Linq命名空间下,有两个静态类 ...
- 本学期微分方程数值解课程总结(matlab代码)
最简单求解一个微分方程数值解得方法:Euler法 function [x,y]=Euler_method(dufun,span,h,x0,y0) %EuLer格式, %求解方程y'=dufun(x,y ...
- Servlet3.0新特性(从注解配置到websocket编程)
Servlet3.0的出现是servlet史上最大的变革,其中的许多新特性大大的简化了web应用的开发,为广大劳苦的程序员减轻了压力,提高了web开发的效率.主要新特性有以下几个: 引入注解配置 支持 ...
- STM8驱动HX711
普及:HX711AD一款专为高精度电子秤而设计的 24 位 A/D 转换器芯片: 获取数据方法:两个普通IO DOUT输入:GPIO_Mode_In_FL_N ...
- Java设计模式:代理模式(二)
承接上文 三.计数代理 计数代理的应用场景是:当客户程序需要在调用服务提供者对象的方法之前或之后执行日志或者计数等额外功能时,就可以用到技术代理模式.计数代理模式并不是把额外操作的代码直接添加到原服务 ...
- poj1990树状数组
Every year, Farmer John's N (1 <= N <= 20,000) cows attend "MooFest",a social gather ...
- Map遍历四种常用方法
Map常用四种遍历方式 一: Map<String,String> map = new HashMap<String,String>(); for(String key:map ...