php indexdb,HTML5浏览器的数据库引擎IndexDB使用例子
本文章来为各位介绍一篇关于HTML5 - 浏览器的数据库引擎IndexDB使用详解希望这篇文章能够帮助到各位朋友,有兴趣的同学可以进来看看吧。
1,IndexedDB介绍
IndexedDB标准是HTML5官方认可的本地数据库解决方案。其目的不是取代服务器端数据库,它在一些特定场景下很有用:
(1)创建自给自足的离线应用
比如页面可以在有网络连接的时候从服务器端数据库获取所需要的数据,然后将数据保存到本地数据库,以便离线时访问。
(2)优化性能
一些应用使用大量的数据,如果持续地在需要时获取同样的数据,网页性能会下降。同样的,创建一个通过复杂计算生成数据的应用,如果不想浪费时间重复做同样的计算,我们可以将所有需要的数据保存到一个IndexedDB数据库中。让它成为超级定制缓存。
(3)改进本地存储
要保存浏览器会话间的数据,并在页面之间传递。如果数据结构简单并且不大,使用本地存储就能胜任。但如果数据非常巨大或者结构非常复杂,使用IndexedDB数据库来管理就会更加简单快捷。
2,浏览器对IndexedDB的支持情况
(1)IE10起支持
(2)Firefox 10、Chrome 23、Opera 15
(3)最新版的桌面版或移动版的Safari也支持IndexedDB。
3,创建并连接数据库
(1)假设我们使用数据库做一个收藏夹功能,其中保存的数据(链接对象)如下:
function LinkRecord(name, url, description) {
this.name = name;
this.url = url;
this.description = description;
}
(2)创建并连接数据库代码如下:
var database;
window.onload = function () {
//打开数据库
var request = window.indexedDB.open("LinksDB", 1);
request.onsuccess = function(event) {
alert("创建/打开数据库成功。");
//让数据库 可在任何地方访问
database = request.result;
//后续操作,比如显示数据库中保存的所有链接
//showLinks();
};
request.onerror = function (event) {
alert("发生错误:" + request.error);
};
request.onupgradeneeded = function(event) {
alert("第一次创建数据库或者更新数据库。");
//alert("数据库老版本为:" + event.oldVersion + " 更新后新版本为:" + event.newVersion)
var db = request.result;
var objectStore = db.createObjectStore("Links", { keyPath: "url" });
}
};
代码说明:
1,database 变量定义在外面,这样就可以在代码的任何地方访问到它,便于后续的增删改查。
2,不管创建新数据库还是打开已有的数据库,都是调用 window.indexedDB 对象的 open() 函数。第一个参数是数据库名,第二个参数是版本号(全新的数据库版本号设为1)。
3,IndexedDB的一切都是异步的,所以当调用open()方法时,只是发送了一个请求。
4,为了要在任务完成时(比如上面的open()方法)响应,我们设置了三个事件处理器:处理成功结果的onsuccess、处理异常的onerror、以及处理onupgradeneeded事件的处理器。
(3)onupgradeneeded事件说明
onupgradeneeded事件比较特别,所以单独提出来说下。
它会在数据库版本不可用时触发(比如请求的数据库版本是2,而本地当前的数据库版本是1),这个时候我们可以进行升级数据库操作,比如添加一个新数据表(event.oldVersion 可以获取当前数据库版本)
也会在所请求的数据库不存在的时候触发,这种情况下浏览器会自动创建一个空数据库。
4,数据表的创建
创建数据表时只需要提供数据表的名称和关键字路径(不像传统数据库还有定义每一个字段的名称和类型),上面样例在数据库中创建了一个名为 Links 的数据表,关键字路径是url(这个匹配数据对象中相应的属性名)
var db = request.result;
var objectStore = db.createObjectStore("Links", { keyPath: "url" });
关键字路径表示对象中作为主关键字(主键)的属性,主关键字是唯一标识每条数据的信息。由于每条链接数据有唯一的URL,所有可以用它做关键字。
如果数据中没有明显适合做主键的属性,可以添加自增ID来作为主键,每次插入新数据时会自动生成唯一的数字。
var objectStore = db.createObjectStore("Links", { keyPath: "id", autoIncrement: true });
5,删除整个数据库
window.indexedDB.deleteDatabase("LinksDB");
6,事务的创建
要用IndexedDB做任何事情,不论是写数据还是读数据,都必须先要创建一个事务。事务作为一个单元一起提交的一个或多个数据操作。如果事务中的任何一部分失败了,事务中的所有操作都会撤销,数据库会恢复到事务之前的状态。
调用database对象的 transaction() 方法创建事务:
1
var transaction = database.transaction(["Links"], "readwrite");
第一个参数:所有需要被引入这个事务的数据表的列表。这个信息让IndexedDB可以锁定数据表,以阻止其他代码同时产生重叠或可能不一致的修改。
第二个参数:指示事务类型的字符串。如果要创建一个可以对数据表进行任何操作的事务(不论是插入、更新还是删除数据),那就用 readwrite;如果只需要读取数据,那就用 readonly。
7,新增、修改数据
同其他的数据操作一样:首先要创建一个事务,然后为事务获取对象存储,调用一个对象存储的方法,处理成功和错误信息。
var linkRecord = new LinkRecord("hangge.com", "http://www.hangge.com",
"航歌 - 做最好的开发者知识平台");
var transaction = database.transaction(["Links"], "readwrite");
var objectStore = transaction.objectStore("Links");
var request = objectStore.put(linkRecord);
request.onerror = function(event) {
alert("发生错误:" + request.error);
};
request.onsuccess = function(event) {
alert("数据保存成功");
};
如果调用 put() 添加的数据与已存在的数据有相同的主关键字,浏览器会将新数据替换已存在的数据。
8,在数据表中查询所有数据
我们需要一个游标来浏览一个IndexedDB数据表。
var transaction = database.transaction(["Links"], "readonly");
var objectStore = transaction.objectStore("Links");
var request = objectStore.openCursor();
request.onerror = function (event) {
alert("发生错误:" + request.error);
};
//准备用于显示结果的字符串
var message = "";
request.onsuccess = function (event) {
//创建一个游标
var cursor = event.target.result;
//根据游标判断是否有数据
if (cursor) {
var linkRecord = cursor.value;
message += linkRecord.name + " " + linkRecord.url + "\n";
//调用cursor.continue()方法访问下一条数据
//当游标到达下一条数据时,onsuccess事件会再一次触发
cursor.continue();
}
else {
//如果一个结果也没有,说明游标到底了,输出信息
alert(message);
}
}
9,查询单条数据
比获取全部数据简单,不需要使用游标,只需使用对象存储的 get() 方法即可。
var transaction = database.transaction(["Links"], "readonly");
var objectStore = transaction.objectStore("Links");
var request = objectStore.get("http://www.hangge.com");
request.onerror = function(event) {
alert("发生错误:" + request.error);
};
request.onsuccess = function(event) {
var linkRecord = request.result;
var message = "获取数据成功。\n";
message += linkRecord.name + "\n";
message += linkRecord.url + "\n";
message += linkRecord.description + "\n";
alert(message);
}
10,删除一条数据
使用对象存储的 delete() 方法即可。
var transaction = database.transaction(["Links"], "readwrite");
var objectStore = transaction.objectStore("Links");
var request = objectStore.delete("http://www.hangge.com");
request.onerror = function (event) {
alert("发生错误:" + request.error);
};
request.onsuccess = function (event) {
alert("删除成功。");
}
11,完整样例
hangge.com
body {
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 14px;
margin-left: 20px;
margin-right: 20px;
}
form {
margin-bottom: 30px;
}
fieldset {
margin-bottom: 15px;
padding: 10px;
max-width: 500px;
}
legend {
padding: 0px 3px;
font-weight: bold;
}
label {
width: 125px;
display: inline-block;
vertical-align: top;
margin: 6px;
}
input:focus {
background: #eaeaea;
}
input {
font-family: "Trebuchet MS", Helvetica, sans-serif;
width: 300px;
}
textarea {
font-family: "Trebuchet MS", Helvetica, sans-serif;
height: 100px;
width: 500px;
}
input[type=button] {
width: 150px;
padding: 8px;
}
div.resultBox {
margin-top: 20px;
padding: 10px;
border: 2px solid #D8EEFE;
border-radius: 15px;
max-width: 500px;
}
.linkButton {
cursor:pointer;
color:blue;
text-decoration:underline;
}
var database;
window.onload = function () {
var request = window.indexedDB.open("LinksDB2", 1);
request.onsuccess = function(event) {
alert("创建/打开数据库成功。");
//让数据库 可在任何地方访问
database = request.result;
//显示数据库中保存的所有链接
showLinks();
};
request.onerror = function (event) {
alert("发生错误:" + request.error);
};
request.onupgradeneeded = function(event) {
alert("第一次创建数据库或者更新数据库。");
//alert("数据库老版本为:" + event.oldVersion + " 更新后新版本为:" + event.newVersion)
var db = request.result;
var objectStore = db.createObjectStore("Links", { keyPath: "url" });
}
};
function addLink() {
//从form表单中获取数据
var name = document.getElementById("name").value;
var url = document.getElementById("url").value;
var description = document.getElementById("description").value;
var linkRecord = new LinkRecord(name, url, description);
var transaction = database.transaction(["Links"], "readwrite");
var objectStore = transaction.objectStore("Links");
var request = objectStore.put(linkRecord);
request.onerror = function(event) {
alert("发生错误:" + request.error);
};
request.onsuccess = function(event) {
alert("添加链接成功");
//显示数据库中保存的所有链接
showLinks();
};
}
function showLinks() {
var transaction = database.transaction(["Links"], "readonly");
var objectStore = transaction.objectStore("Links");
var request = objectStore.openCursor();
request.onerror = function (event) {
alert("发生错误:" + request.error);
};
//要在页面上显示的字符串
var markupToInsert = "";
request.onsuccess = function (event) {
//创建一个游标
var cursor = event.target.result;
//根据游标判断是否有数据
if (cursor) {
var linkRecord = cursor.value;
markupToInsert += "" + linkRecord.name + " (" +
"详细" + " " +
"删除" +
")
";
//调用cursor.continue()方法访问下一条数据
//当游标到达下一条数据时,onsuccess事件会再一次触发
cursor.continue();
}
else {
如果一个结果也没有,说明游标到底了,输出信息
if (markupToInsert == "") {
markupToInsert = "<< 暂无链接。 >>";
}
else {
markupToInsert = "目前添加的链接如下:
" + markupToInsert;
}
//显示数据
var resultsElement = document.getElementById("links");
resultsElement.innerHTML = markupToInsert;
}
};
}
function getLinkDetails(element) {
var url = element.getAttribute("data-url");
var transaction = database.transaction(["Links"], "readonly");
var objectStore = transaction.objectStore("Links");
var request = objectStore.get(url);
request.onerror = function(event) {
alert("发生错误:" + request.error);
};
request.onsuccess = function(event) {
alert("数据获取成功");
var linkRecord = request.result;
var resultsElement = document.getElementById("linkDetails");
resultsElement.innerHTML = "" + linkRecord.name + "
" +
"URL: " + linkRecord.url + "
" +
"描述: " + linkRecord.description;
}
}
function deleteLink(element) {
var url = element.getAttribute("data-url");
var transaction = database.transaction(["Links"], "readwrite");
var objectStore = transaction.objectStore("Links");
var request = objectStore.delete(url);
request.onerror = function (event) {
alert("发生错误:" + request.error);
};
request.onsuccess = function (event) {
alert("删除成功");
//显示数据库中保存的所有链接
showLinks();
}
}
function LinkRecord(name, url, description) {
this.name = name;
this.url = url;
this.description = description;
}
网址收藏夹
详细信息
名称:
URL地址:
描述:
php indexdb,HTML5浏览器的数据库引擎IndexDB使用例子相关推荐
- php indexdb,浏览器端数据库存储方案的整理 -- indexDB 和 localStorage
有些安全性不太重要的数据,我不想花大力气搞一台服务器,再安装mysql或者 monogdb,再写点rest接口.这也太麻烦了,浏览器里本来就有很好用的数据库.你为什么不尝试一下呢? 1. 客户端存储目 ...
- php indexdb,html5使用indexdb的代码实例分享(图文)
前面说过html5对于离线应用的支持是很好的,不禁支持localstorage这样在客户端存储一个键值对的方式而且还可以引用manifest文件,将需要缓存的文件在其中定义,其实html5中还可以使用 ...
- 无插件无 Flash HTML5 浏览器直接玩《Quake II》
HTML5 的能力究竟有多强?在游戏方面是否能超过Flash?看过这个视频 就能见分晓. 为了展示HTML5浏览器的游戏能力,Google Web工具包团队的工程师专门制作了基于HTML5技术的经典第 ...
- HTML5 Web SQL数据库
HTML5 Web SQL 数据库 Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs. 如果你是一个 We ...
- html5 多页面共享数据库,可以跨页面使用HTML5 Web SQL数据库吗?(Can HTML5 Web SQL databases be used across pages?)...
可以跨页面使用HTML5 Web SQL数据库吗?(Can HTML5 Web SQL databases be used across pages?) 这可能是一个非常简单的问题,请原谅我的无知,但 ...
- 高性能数据库引擎 CoolHash 产品宣言 Fourinone4.0版新特性(转)
Fourinone4.0版新特性:一个高性能的数据库引擎CoolHash(酷哈嘻) 一.前言:如何写一个数据库 如果将操作系统和业务应用之间的软件都统称中间件的话,那么最重要的软件无疑是数据库,它比w ...
- 【前端】浏览器内核(渲染引擎)有哪些?
一.浏览器的结构: ① 用户界面(UI):包括菜单栏.工具栏.地址栏.后退/前进按钮.书签目录等,也就是能看到的除了显示页面的主窗口之外的部分: ② 浏览器引擎(Rendering engine):也 ...
- 19种最佳HTML5和JavaScript游戏引擎和模板
您想编写在线游戏吗? 您很幸运,对于任何在线游戏开发人员和有志成为在线游戏开发人员的人来说,这都是一个美好的时光. Flash的时代已经过去,这为数十种(也许数百种!)不同的引擎,库和常见Web语言的 ...
- 浏览器内核-渲染引擎、js引擎
一个完整的浏览器包含浏览器内核和浏览器的外壳(shell).浏览器核心--内核分成两部分:渲染引擎和js引擎.由于js引擎越来越独立,内核就倾向于只指渲染引擎. 1 浏览器组成结构 浏览器一般由七个模 ...
最新文章
- linux 定时清理tomcat日志
- 微服务为什么选Spring Cloud
- 1562a检测软件_洛达1562a空间音频版评测!!!
- vue与外部html通信,VUE页面实现加载外部HTML方法
- html5的所有标签页,HTML5所有标签总集
- pycharm添加python注释头_Pycharm自动添加头注释
- c语言中x%y什么意思,c语言里%是什么意思?
- oracle vm virtualbox无网络连接_VirtualBox 安装 Windows 2000/XP 测试
- python抓取漫画(破解js)
- oracle导出为dmp文件,oracle导出dmp文件的2种方法
- Mockplus摹客:原型设计工具
- 为什么JAVA对象需要实现序列化?
- 【转载】PCB设计方法和技巧
- css3 - 图标元素动画效果3 - 图标整体在Y轴上移
- 中国证券金融股份有限公司的成立加速融资融券的发展
- PCB贴片元件封装焊盘设计尺寸标准
- 卷积神经网络( CNN)与全卷积神经网络(FCN)
- 中关村科技企业融资缺口700亿 商业银行垂涎
- 南加大计算机游戏专业,南加州大学计算机科学理科硕士(游戏发展)入学条件及实习就业...
- 阿里云code登录,阿里云code使用教程
热门文章
- 愿世间再无人不懂正则
- 【学习笔记】《STL使用入门教程》第七讲:STL的综合应用
- org.codehaus.jettison.json.JSONObject类型的Null值怎么判断的问题,JSONObject$Null
- 5G手机出货已超328万部,哪款最值得买?
- JZOJ 5495 MiniumCut (最小割树)
- ORB-SLAM2 编译记录
- 刚才我叫申通快递员来收我的S5PV210 V2核心板物料,我震惊了——原来网上说快递员月薪过万都不是谣言!
- 数据库系统管理 笔记
- C语言之会移动的小人(上下和左右)
- git 中 subproject commit XXX错误