IndexedDB:浏览器里内置的数据库(转)
出处;http://www.webhek.com/indexeddb/
IndexedDB是HTML5规范里新出现的浏览器里内置的数据库。对于在浏览器里存储数据,你可以使用cookies或local storage,但它们都是比较简单的技术,而IndexedDB提供了类似数据库风格的数据存储和使用方式。存储在IndexedDB里的数据是永久保存,不像cookies那样只是临时的。IndexedDB里提供了查询数据的功能,在online和offline模式下都能使用。你可以用IndexedDB存储大型数据。
IndexedDB里数据以对象的形式存储,每个对象都有一个key值索引。IndexedDB里的操作都是事务性的。一种对象存储在一个objectStore里,objectStore就相当于关系数据库里的表。IndexedDB可以有很多objectStore,objectStore里可以有很多对象。每个对象可以用key值获取。
IndexedDB vs LocalStorage
IndexedDB和LocalStorage都是用来在浏览器里存储数据,但它们使用不同的技术,有不同的用途,你需要根据自己的情况适当的选择使用哪种。LocalStorage是用key-value键值模式存储数据,但跟IndexedDB不一样的是,它的数据并不是按对象形式存储。它存储的数据都是字符串形式。如果你想让LocalStorage存储对象,你需要借助JSON.stringify()
能将对象变成字符串形式,再用JSON.parse()
将字符串还原成对象。但如果要存储大量的复杂的数据,这并不是一种很好的方案。毕竟,localstorage就是专门为小数量数据设计的,它的api是同步的。
IndexedDB很适合存储大量数据,它的API是异步调用的。IndexedDB使用索引存储数据,各种数据库操作放在事务中执行。IndexedDB甚至还支持简单的数据类型。IndexedDB比localstorage强大得多,但它的API也相对复杂。
对于简单的数据,你应该继续使用localstorage,但当你希望存储大量数据时,IndexedDB会明显的更适合,IndexedDB能提供你更为复杂的查询数据的方式。
IndexedDB vs Web SQL
WebSQL也是一种在浏览器里存储数据的技术,跟IndexedDB不同的是,IndexedDB更像是一个NoSQL数据库,而WebSQL更像是关系型数据库,使用SQL查询数据。W3C已经不再支持这种技术。具体情况请看:http://www.w3.org/TR/webdatabase/。
因为不再支持,所以你就不要在项目中使用这种技术了。
IndexedDB vs Cookies
Cookies(小甜点)听起来很好吃,但实际上并不是。每次HTTP接受和发送都会传递Cookies数据,它会占用额外的流量。例如,如果你有一个10KB的Cookies数据,发送10次请求,那么,总计就会有100KB的数据在网络上传输。Cookies只能是字符串。浏览器里存储Cookies的空间有限,很多用户禁止浏览器使用Cookies。所以,Cookies只能用来存储小量的非关键的数据。
IndexedDB的用法
想要理解IndexedDB,最好的方法是创建一个简单的web应用:把你们班的学生的学号和姓名存储在IndexedDB里。IndexedDB里提供了简单的增、删、改、查接口。
打开一个IndexedDB数据库
首先,你需要知道你的浏览器是否支持IndexedDB。请使用最新版的谷歌浏览器或火狐浏览器。低版本的IE是不行的。
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; if(!window.indexedDB)
{
console.log("你的浏览器不支持IndexedDB");
}
一旦你的浏览器支持IndexedDB,我们就可以打开它。你不能直接打开IndexedDB数据库。IndexedDB需要你创建一个请求来打开它。
var request = window.indexedDB.open("testDB", 2);
第一个参数是数据库的名称,第二个参数是数据库的版本号。版本号可以在升级数据库时用来调整数据库结构和数据。
但你增加数据库版本号时,会触发onupgradeneeded
事件,这时可能会出现成功、失败和阻止事件三种情况。
var db;
request.onerror = function(event){
console.log("打开DB失败", event);
}
request.onupgradeneeded = function(event){
console.log("Upgrading");
db = event.target.result;
var objectStore = db.createObjectStore("students", { keyPath : "rollNo" });
};
request.onsuccess = function(event){
console.log("成功打开DB");
db = event.target.result;
}
onupgradeneeded
事件在第一次打开页面初始化数据库时会被调用,或在当有版本号变化时。所以,你应该在onupgradeneeded
函数里创建你的存储数据。如果没有版本号变化,而且页面之前被打开过,你会获得一个onsuccess
事件。如果有错误发生时则触发onerror
事件。如果你之前没有关闭连接,则会触发onblocked
事件。
在上面的代码片段里,我们创建了一个Object Store,叫做“students”,用“rollNo”做数据键名。
往ObjectStore里新增对象
为了往数据库里新增数据,我们首先需要创建一个事务,并要求具有读写权限。在indexedDB里任何的存取对象的操作都需要放在事务里执行。
var transaction = db.transaction(["students"],"readwrite");
transaction.oncomplete = function(event) {
console.log("Success");
}; transaction.onerror = function(event) {
console.log("Error");
};
var objectStore = transaction.objectStore("students"); objectStore.add({rollNo: rollNo, name: name});
从ObjectStore里删除对象
删除跟新增一样,需要创建事务,然后调用删除接口,通过key删除对象。
db.transaction(["students"],"readwrite").objectStore("students").delete(rollNo);
我把语句合并到了一起,变得更简单,但效果是一样的。
通过key取出对象
往get()
方法里传入对象的key值,取出相应的对象。
var request = db.transaction(["students"],"readwrite").objectStore("students").get(rollNo);
request.onsuccess = function(event){
console.log("Name : "+request.result.name);
};
更新一个对象
为了更新一个对象,首先要把它取出来,修改,然后再放回去。
var transaction = db.transaction(["students"],"readwrite");
var objectStore = transaction.objectStore("students");
var request = objectStore.get(rollNo);
request.onsuccess = function(event){
console.log("Updating : "+request.result.name + " to " + name);
request.result.name = name;
objectStore.put(request.result);
};
所有的源代码都在这里。如果有任何的问题,请留言,或通过 @歪脖骇客 给我私信。
IndexedDB:浏览器里内置的数据库(转)的更多相关文章
- thinkphp中的内置操作数据库与mysql中的函数汇总
8.4.4 Model类getModelName() 获取当前Model的名称getTableName() 获取当前Model的数据表名称switchModel(type,vars=array()) ...
- 使用蓝灯后,IE浏览器以及内置IE浏览器的程序不能使用的解决方案
使用完蓝灯后,每次使用IE浏览器都不能正常使用,于是有了下面的这个方案 1.通过Win+R 打开注册表编辑器(regedit) 进入目录 HKEY_CURRENT_USER \ Software \ ...
- list里内置程序用法
列表是我们编程工作中经常都会遇到的数据类型.以下是列表里面的一些常用操作,主要分为:增! 删! 改! 查! first 查: 1.索引(下标),其中有切片操作,但要注意下标都是从零开始: 2.查元素出 ...
- QScrollArea可以帮助我们实现让一个widget的内容带有滚动条(QWidget里内置QScrollArea,QScrollArea里再内置其它QWidget)
使用QScrollArea可以帮助我们实现让一个widget的内容带有滚动条,用户可以通过拖动滚动条来查看更多内容, 代码示例如下: 1.带有滚动条的widget列表 #include "w ...
- MYSQL内置MYSQL数据库中你可以得到的信息
1:help_topic 可以查看函数帮助,例如:SELECT * from help_topic WHERE name='concat' 可以查看concat函数. 2:SLOW_LOG 慢查询日 ...
- 现代浏览器内置的可等效替代jQuery的功能
jQuery的体积在不断的增大.新功能要不断增加,这是必然结果.虽然从版本1.8.3开始的瘦身效果明显,但不可否认的是,对于移动手机端的网 页开发,它仍然是不可接受的.当然,jQuery不是铁板一块, ...
- AgileBoot - 如何集成内置数据库H2和内置Redis
本项目地址: github: https://github.com/valarchie/AgileBoot-Back-End gitee: https://gitee.com/valarchie/Ag ...
- 探讨Android中的内置浏览器和Chrome
1.Android默认浏览器和Chrome的区别 Android出厂自带的浏览器:安卓WebKit浏览器,也成内置浏览器或者默认浏览器. 安卓WebKit不是Chrome.Chrome浏览器在它的用户 ...
- 几种主流浏览器内置http抓包工具软件使用方法
对于学习网站的人或者相关编程人员,经常需要用到http抓包工具来跟踪网页,但主流抓包软件如httpwatch.httpanalyzerstdv都是收费的,破解版往往也不稳定.实际上现在很多浏览器都内置 ...
随机推荐
- hdu1066
求N!的非零末尾位(吉大ACM模板) #include <stdio.h> #include <string.h> #define MAXN 10000 int lastdig ...
- php浮点数比较
本文实例讲述了PHP中两个float(浮点数)比较方法.分享给大家供大家参考.具体如下: 最近在开发一个合同管理系统的时候,涉及到两个浮点数比较,算是把我郁闷惨了.在N久以前,就不晓得从哪里听来的一个 ...
- Django 思维导图
- debian下为apache启用rewrite模块
如果我们是自己编译的apache,那么启用或禁用某个模块应该说是比较容易的事,只要修改apache的配置文件就可以了.但是我们没有理由不用已经做好的二进制文件进行安装,使用apt-get要方便多了. ...
- 【python】常用的日期和时间操作
#-*- coding: utf-8 -*- import datetime #给定日期向后N天的日期 def dateadd_day(days): d1 = datetime.datetime.no ...
- laravel 数据库操作
1 配置信息 1.1配置目录: config/database.php 1.2配置多个数据库 //默认的数据库 'mysql' => [ 'driver' => 'mysql', 'hos ...
- C# 实现快速闪电关机、快速重启
using System; using System.Runtime.InteropServices; namespace FastReboot { static class Program { pr ...
- 02 - Unit05:加载笔记列表
加载笔记列表 发送Ajax请求 绑定发送事件 获取参数: bookId 发送请求: /note/list.do 事件绑定 $(function(){ Ajax请求发送-->服务器处理--> ...
- Linq模型ObjectContext下查看Sql语句。
ObjectContext 并没有提供 LINQ to SQL DataContext.Log 这样的功能,要查看实际生成的 T-SQL 语句,要么借助 SQL Server Sql Profiler ...
- 积木城堡(dp)
题目描述 XC的儿子小XC最喜欢玩的游戏用积木垒漂亮的城堡.城堡是用一些立方体的积木垒成的,城堡的每一层是一块积木.小XC是一个比他爸爸XC还聪明的孩子,他发现垒城堡的时候,如果下面的积木比上面的积木 ...