IndexdDB简介

html5中indexdDB是一种能在浏览器持久的存储结构化数据的数据库;且具有丰富的查询能力。

新建一个IndexdDB数据库

IDBOpenDBRequest定义有几个重要的属性:

  • onerror:新建或打开数据库失败的回调
  • onsuccess:新建或打开数据库成功的回调
  • onupgradeneeded:新建或打开数据库版本发生变化时触发的回调

以上的几个API均是异步执行,所以我们在它们的回调函数中处理我们需要的数据。

 function createIndexDB(dbName,version) {//根据数据库名称和数据库版本号来打开或者新建一个数据库
var version = version || 1;
var request = window.indexedDB.open(dbName,version);
request.onerror = function(e) { //新建或打开数据失败的回调函数
console.log(e);
}; request.onsuccess = function(e) { //新建或打开数据库成功的回调
mydb.db = e.target.result; // 把result赋值给对象属性
}; //初始化object store 也可以//删除object store
request.onupgradeneeded = function(e){
var db = e.target.result;
if(!db.objectStoreNames.contains('Employees')) { //是否包含员工这个对象
//db.createObjectStore('Employees',{keyPath:'id'}); // keyPath 指定对象的哪个属性作为主键
//db.createObjectStore('Employees',{autoIncrement:true}); //keyGenerate 主键自增长 ,任意值,
var store = db.createObjectStore('Employees',{keyPath:'id'}); // 同时返回一个store
store.createIndex('nameIndex','name',{unique:true}); //创建name的索引
store.createIndex('ageIndex','age',{unique:true});//创建age的索引
}
/*//删除object store
if(db.objectStoreNames.contains('Employees')) { //先查询是否存在
db.deleteObjectStore('Employees');
}*/ console.log("db version change to" + version);
}; }

新建数据库成功:

初始化一些数据:

 var mydb = {
name:'firstDB',
version:1, //只能是整数,3.31--->会转成3
db:null
};
// employee数据
var Employee= [{
id:'lx001',
name:'lucas',
age:20
},
{
id:'lx002',
name:'lucy',
age:18
},
{
id:'lx003',
name:'mike',
age:22
},
{
id:'lx004',
name:'susan',
age:21
}
];

添加数据Create:

 //添加数据
function addData(db,storename){
var transaction = db.transaction(storename,"readwrite");//首先获取事务
var store = transaction.objectStore(storename);//根据事务获取对应的storename获取我们新建数据库的store
for(var i = 0; i < employee.length; i++) {//遍历我们的数据
store.add(employee[i]);//add到store中
}
}

调用addData函数添加数据:addData(mydb.db, 'Employee')

成功添加数据;

indexdDB中事务

数据库都会有事务操作,indexdDB中根据数据库名字即read/write来获取事务,如添加数据库第一句代码。事务中要指定需要的object store;同时事务中具有3中模式:

  • read:只读,不可修改数据库可以并发执行;
  • readwrite:读写,可以修改数据库;
  • verionchange:数据库版本变更

indexdDB中的主键,索引,游标

主键:在新建数据库的时候指定数据的某个字段作为主键且该字段具有唯一性;如本文中就指定了id作为了主键(keyPath)。同时也可以使用自动增长数字作为键值(keyGenerator);同时也可以不指定。

索引:索引页是数据库中高效查询的一种方法;同时indexdDB也提供了创建索引的功能;如上新建数据库的时候我们就顺便创建了两个索引(nameIndex/ageIndex)。创建索引需要3个参数:索引名称,创建索引的字段,索引属性是否唯一;

游标:有了索引没有游标索引岂不是很寂寞,indexdDB同时也提供了创建游标的方法;我们可以使用游标来遍历object store了;

下面是创建游标:

 //使用游标来获取值,结合索引
function getDataByFetch(db, storename,indexType, indexName) {
var transaction = db.transaction(storename);
var store = transaction.objectStore(storename);
var index = store.index(indexType); //
var request = index.openCursor(IDBKeyRange.only(indexName)); //打开游标,得到一个请求;store打开的是哪个类型的索引,only中就是哪个索引的值
request.onsuccess = function(e) {
var cursor = e.target.result;
if(cursor) {
console.log(cursor.key)
var e = cursor.value;
console.log(e);
cursor.continue(); //游标下一位,没有会返回undefined
}
}
}

游标创建完成;

平常数据库中常常使用的CRUD,indexdDB也提供了相应的方法;上面已经介绍了添加数据

查询数据 Retrieve:

 //根据id获取数据
function getDataByKey(db,storename,id){
var transaction = db.transaction(storename,'readwrite');//先获取事务
var store = transaction.objectStore(storename);//获取object store
var req = store.get(id); // 根据指定的keyPath的值查询 即id值
req.onsuccess = function(e) {
var employee = e.target.result;
console.log(employee.name);
}
}
//利用索引来获取值
function getDataByIndex(db,storename,indexType, indexName) {
var transaction = db.transaction(storename);//根据storename获取事务
var store = transaction.objectStore(storename); //storename为参数用事务获取store
var index = store.index(indexType);//使用index方法获取IDBIndex对象
index.get(indexName).onsuccess = function(e) {
var e = e.target.result;
console.log(e);
}
} //同时也可以使用游标来获取值,结合索引
function getDataByFetch(db, storename,indexType, indexName) {
var transaction = db.transaction(storename);
var store = transaction.objectStore(storename);
var index = store.index(indexType); //
var request = index.openCursor(IDBKeyRange.only(indexName)); //打开游标,得到一个请求;store打开的是哪个类型的索引,only中就是哪个索引的值
request.onsuccess = function(e) {
var cursor = e.target.result;
if(cursor) {
console.log(cursor.key)
var e = cursor.value;
console.log(e);
cursor.continue(); //游标下一位,没有会返回undefined
}
}
}

查询结果:

更新数据 update:

// 更新数据
function updateData(db, storename, id){
var transaction = db.transaction(storename, 'readwrite'); //获取事务
var store = transaction.objectStore(storename);// 得到指定的object store
var req = store.get(id);//根据id查找指定的对象
req.onsuccess = function(e) {
var employee = e.target.result;//得到对象
employee.age = 19;//修改值
store.put(employee);//将修改之后的值放回指定的object store中
};
}

删除数据 delete:

 // 根据id删除指定数据
function deleteData(db, storename, id){
var transaction = db.transaction(storename, 'readwrite');//获取事务
var store = transaction.objectStore(storename); // 得到对应的object store
store.delete(id);// 根据id删除对应store中的数据
}

清空object store

 //清空object store
function clearStore(db, storename) {
var transaction = db.transaction(storename,'readwrite'); // 首先获取事务
var store = transaction.objectStore(storename); //其次得到指定的object store
store.clear(); // store调用clear方法
}

怎么样, 是不是觉得indexdDB很强大呢?以上都是自己的一些个人学习收获,如有不对的地方欢迎大家批评指正。谢谢!

谈谈html5存储之IndexdDB的更多相关文章

  1. html5存储相关 coookie localstorage session storage

    html5存储 coookie  localstorage   session storage

  2. HTML5存储方式

    由于之前在参加面试或者笔试的过程中经常会被问到HTML5存储的内容,包括它们之间的区别.特征和应用范围,所以看到一篇介绍不错的文章,把里面的个人觉得适合我的内容按照自己的理解总结如下.方便以后忘记了进 ...

  3. html5存储方式localstorage和sessionStorage

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. 区别:localStorage无时间限制,除非主动删除数据,否则永不过期:sessio ...

  4. HTML5存储之 indexedDB

    IndexeDB是HTML5 重要的一部分,它是一种轻量级的NOSQL数据库.对创建具有丰富本地存储数据的数据密集型的离线HTML5 Web 应用程序很有用. IndexedDB是为了能够在客户端存储 ...

  5. 【javascript】谈谈HTML5 ——HTML兽进化, H5兽!

    作为一名Web开发者,可能你并没有对这个“H5”这个字眼投入太多的关注,但实际上它早已不知不觉进入到你的开发中,并且总有一天会让你不得不正视它,了解它并运用它   打个比方:<海贼王>中的 ...

  6. 【javascript】谈谈HTML5: Web-Worker、canvas、indexedDB、拖拽事件

    前言:作为一名Web开发者,可能你并没有对这个“H5”这个字眼投入太多的关注,但实际上它早已不知不觉进入到你的开发中,并且总有一天会让你不得不正视它,了解它并运用它   打个比方:<海贼王> ...

  7. HTML5存储--离线存储

    离线存储技术 HTML5提出了两大离线存储技术:localstorage与Application Cache,两者各有应用场景:传统还有离线存储技术为Cookie. 经过实践我们认为localstor ...

  8. HTML5存储(带一个粗糙的打怪小游戏案例)

    本地存储localStorage设置存储内容setItem(key,value) localStorage.setItem('leo','23'); 更新存储内容对象[key]=value对象.key ...

  9. HTML5存储

    Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的.Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外co ...

随机推荐

  1. PHP用星号隐藏部份用户名、身份证、IP、手机号等实例

    PHP用星号隐藏部份用户名.身份证.IP.手机号等实例 http://www.jb51.net/article/48800.htm 作者: 字体:[增加 减小] 类型:转载 时间:2014-04-08 ...

  2. Socket--Java

    Server.java package socket; import java.io.BufferedReader; import java.io.DataInputStream; import ja ...

  3. webkitTransitionEnd webkitAnimationEnd事件

    在CSS 3中,可以通过使用keyframe样式属性与animation样式属性实现animation动画,使用transition样式属性实现transition动画. 在WebKit引擎的浏览器( ...

  4. swift 资料

    swift 开源代码学习 https://github.com/belm/BaiduFM-Swift http://www.cnblogs.com/zzc19920809/p/4881268.html ...

  5. C# WebService输出JSON 实现二

    一般js请求web服务uk可以通过 contentType: "application/json"  获取json效果,为了取得更好的效果,可以在服务端强制返回JSON格式 服务端 ...

  6. 你知道吗?使用任何HTML5开发工具都可开发iOS、Android原生App

    APICloud App开发平台一直在不断升级开发工具库,这一年增加了众多开发工具.目的就是让开发者可以选择使用任何自己喜欢的HTML5开发工具去开发App.这次,APICloud把所有关于开发工具的 ...

  7. 安装完magento后,其他电脑无法访问magento,URL自动跳转到http://localhost/magento

    问题:在电脑A上安装完了magento 1.7.0.2 然后, 在电脑A上用 http://localhost/magento 访问网站,没有问题. 但在电脑B 上用 http://192.168.4 ...

  8. 1.初识Shell脚本语言

    PS:在做Linux下STM8固件升级项目中,需要让CPU通过I2C总线给STM8传输数据,刚开始一个一个的敲,很浪费时间,用shell脚本大大提高了数据传输效率,它是用户与内核进行交互操作的一种接口 ...

  9. MVC中的数据注解和验证

    数据注解和验证 用户输入验证在客户端浏览器中需要执行验证逻辑. 在客户端也需要执行. 注解是一种通用机制, 可以用来向框架注入元数据, 同时, 框架不只驱动元数据的验证, 还可以在生成显示和编辑模型的 ...

  10. 设置更新源和下载ferret

    kali无法定位软件包 解决: deb http://http.kali.org/kali kali-rolling main non-free contrib kali可用的官方更新源(cd /et ...