如何使用indexdb
一、实现步骤
1)获得indexedDB对象
if (!window.indexedDB) {
window.indexedDB = window.mozIndexedDB || window.webkitIndexedDB || window.msIndexDB; //webkit是chrome
}
2)打开数据库
var openDBRequest = indexedDB.open("person",3); //第二个参数为版本
var openDBRequest = indexedDB.open("dev");
由于事件执行的顺序问题,打开数据库open方法一定是放在window.onload = function(){} 或都其它事件函数之外
3)创建主键、索引
request.onupgradeneeded = function(event){ //数据库版本发生变化时先调用这个函数,然后再执行onsuccess
alert(event.oldVersion);
database = request.result;
if (database.objectStoreNames.contains('user')) {
database.deleteObjectStore('user');
}
var store = database.createObjectStore("user", {keyPath: "uuid", autoIncrement: true}); //此处表示将uuid作为主键
//keyPath 后面的值一定是要存在的属性名,用于标志唯一字段,如果重复则不添加进去,可以是字符串、数值类型等
//此值也是索引中的 Primary key(keyPath : "uuid")
store.createIndex("idIndex", "id", {unique: true}); //创建索引 (此处的id改为uuid)
//idIndex 为索引的名称,id 为 索引中的KeyPath,即将id属性中的值作为索引
//注:如果写成id的话(与上面的keyPath不一至,将不会创建索引,这里将不会创建索引)
var user1 = {uuid :1001, username: "caoxiaobo", password: "123456", age: 23,other:"test"};
var user2 = {uuid :1002, username: "adminuser", password: "123456", age: 24};
var user3 = {uuid :1003, username: "test1user", password: "123456", age: 25}
var req = store.put(user1);
store.put(user2);
store.put(user3);
req.onsuccess = function(){
//...
}
}
索引创建规则(只能有一个unique为true)
例:
4)删除数据库
var deleteRequest = indexedDB.deleteDatabase('test');
deleteRequest.onsuccess = function(){
alert("删除成功");
}
db.deleteObjectStore('books'); //删除数据表
二、常用方法及说明
例如:window.indexedDB = window.mozIndexedDB || window.webkitIndexedDB || window.msIndexDB;
返回类型:IDBFactory
接口/属性 | 类型 | 说明 |
IDBFactory.cmp | 方法 | 比较两个键的方法并返回一个结果,表明哪个值更大 |
IDBFactory.deleteDatabase | 方法 | 请求删除数据库 |
IDBFactory.open | 方法 | 请求打开一个数据库的连接,返回类型:IDBOpenDBRequest |
备注:不管创建新数据库还是打开已有的数据库,都是调用 window.indexedDB 对象的 open()
例如:request = indexedDB.open("dev", 3);
返回类型:IDBOpenDBRequest
接口/属性 | 类型 | 说明 |
IDBOpenDBRequest.onblocked | 事件 | |
IDBOpenDBRequest.onupgradeneeded | 事件 | 会在当一个数据库的版本比已经存在的版本还高的时候触发 |
IDBOpenDBRequest.result | 属性 | 返回一个IDBDatabase对象 |
IDBOpenDBRequest.transaction | 属性 | 事务的方法,返回一个IDBTransaction对象 |
备注:
1.如果该数据库不存在,则创建,如果存在,则打开并返回一个IDBOpenDBRequest对象;
2.如果version大于oldVersion,则执行onupgradeneeded,再执行onsuccess,否则直接执行onsuccess
例如:database = openRequest.result;
返回类型:IDBDatabase
接口名称 | 类型 | 说明 |
IDBOpenDBRequest.name | 属性(只读) | DOMString类型,当前连接数据库名 |
IDBOpenDBRequest.objectStoreNames | 属性(只读) | DOMStringList类型,当前连接连接数据库中所有的object store 名字列表。 |
IDBOpenDBRequest.version | 属性(只读) | 64-bit 整型数,当前连接数据库的版本 。当数据第一次被创建时,这个属性是一个空的字符串 |
IDBOpenDBRequest.onabort | 事件 | 在中断数据库访问时触发 |
IDBOpenDBRequest.onclose | 事件 | 在一个单独的线程中关闭数据库连接并立即返回 |
IDBOpenDBRequest.onerror | 事件 | 当访问数据库失败时触发 |
IDBOpenDBRequest.onversionchange | 事件 | 当数据库结构发生更改时触发 |
例如:transaction = database.transaction(stores, mode);
返回类型:IDBTransaction
接口/属性 | 说明 | |
IDBTransaction.db | 属性(只读) | 当前事务所属的数据库连接 |
IDBTransaction.error | 属性 | |
IDBTransaction.mode | 属性(只读) | 使用事务模式,如readonly、readwrite等 |
IDBTransaction.objectStoreNames | 属性 | 返回一个DOMStringList类型, IDBObjectStore |
IDBTransaction.onabort | 事件 | |
IDBTransaction.oncomplate | 事件 | |
IDBTransaction.onerror | 事件 | |
IDBTransaction.onversionchange | 事件 |
事务种类
返回类型:IDBObjectStore
接口/属性 | 类型 | 说明 |
IDBObjectStore.autoIncrement | ||
IDBObjectStore.indexNames | 属性 | 使用事务模式 |
IDBObjectStore.keyPath | 属性 | |
IDBObjectStore.name | 属性 | |
IDBObjectStore.transaction | 方法 | 事件的事件处理器 |
IDBObjectStore.autoIncrement | 属性 | true/false |
例如:request = store.get(id);
返回类型:IDBRequest
接口/属性 | 类型 | 说明 |
IDBRequest.error | 属性(只读) | 当前事务所属的数据库连接 |
IDBRequest.onerror | ||
IDBRequest.onsuccess | 属性(只读) | 使用事务模式 |
IDBRequest.readyState | 返回一个DOMStringList类型, IDBObjectStore | |
IDBRequest.result | 事件 | |
IDBRequest.source | 事件的事件处理器 | |
IDBRequest.transaction | 事件 |
三、CRUD操作
指定游标范围
openKeyCursor() 等同于openCursor()
IDBKeyRange.only(value) 只获取指定数据
IDBKeyRange.lowerBound(value, isOpen) 获取最小是value的数据,第二个参数用来指示是否排除value值本身,也就是是否关闭区间
IDBKeyRange.upperBound(value, isOpen) 和上面类似,用于获取最大值是value的数据 如果isOpen为true,即为[value, ~)
IDBKeyRange.bound(value1, value2, isOpen1, isOpen2) 查询[value1,value2) 区间内的数据 //第二个参数为游标的方向:
IDBCursor.NEXT 顺序循环
IDBCursor.NEXT_NO_DUPLICATE 顺序循环不重复
IDBCursor.PREV 倒序循环
IDBCursor.PREV_NO_DUPLICATE 倒序循环不重复
//查询数据
function getData() {
//事务的创建
var tx = database.transaction(["user"], "readonly"); //readwrite readonly
var store = tx.objectStore("user");
var request = store.get(1001);
request.onsuccess = function() {
var user = request.result;
//var user = event.target.result;
console.log(JSON.stringify(user));
};
} //游标查询所有
function getAllData() {
//事务的创建
var tx = database.transaction(["user"], "readonly"); //readwrite readonly
var store = tx.objectStore("user");
var openCursor = store.openCursor();
openCursor .onsuccess = function() {
var cursor= request.result;
//var cursor = event.target.result;
if(cursor){
console.log(JSON.stringify(cursor.value));
cursor.continue();
}
};
} //游标+索引查询
function getDataByIndexAndCursor() {
var tx = database.transaction(["user"], "readonly"); //readwrite readonly
var store = tx.objectStore("user");
var index = store.index("nameIndex");
var request = index.openCursor(IDBKeyRange.lowerBound("123"));
//var request = index.openCursor(IDBKeyRange.bound("a","v", false, true)); //区分大小写
request.onsuccess = function() {
var cursor = request.result;
if (cursor) {
console.log(JSON.stringify(cursor.value));
cursor.continue();
}
}
}
//获取记录数
function count() {
var tx = database.transaction(["user"], "readonly");
var store = tx.objectStore("user");
var request = store.count();
request.onsuccess = function() {
var count = request.result;
console.log(count);
}
}
//按索引查询
var findByIndex = function() {
var mode = IDBTransaction.READ_ONLY;
var tx = database.transaction(["user"], "readonly");
var store = tx.objectStore(["user"]);
var index = store.index("idIndex");
var request = index.get(1001);
console.log(request);
request.onsuccess = function() {
var data = request.result;
console.log(JSON.stringify(data));
}
}
//添加数据
function addData(){
var tx = database.transaction(["user"],"readwrite");
var store = tx.objectStore("user");
var user4 = {id:1004, username: "caoxiaobo", password: "123456", age: 23,other:"test"};
var user5 = {id:1005, username: "adminuser", password: "123456", age: 24};
var user6 = {id:1006, username: "test1user", password: "123456", age: 25};
store.put(user4);
store.put(user5);
store.put(user6);
} //删除数据
function delData(){
var tx = database.transaction(["user"],"readwrite");
var store = tx.objectStore("user");
store.delete(1004);
store.delete(1005);
store.delete(1006);
} //清空数据
function clearData(){
var tx = database.transaction(["user"],"readwrite");
var store = tx.objectStore("user");
store.clear( );
} //修改数据
function updata(){
var tx = database.transaction(["user"],"readwrite");
var store = tx.objectStore("user");
var request = store.get(1008);
request.onsuccess = function(event) {
var user = event.target.result;
user.username = "cxb1008";
user.age = 28;
store.put(user);
}
}
如何使用indexdb的更多相关文章
- HTML5:离线存储(缓存机制)-IndexDB
https://www.w3.org/TR/IndexedDB/ .. <!DOCTYPE html> <html> <head> <meta charset ...
- html5中的indexDB
1.关系型数据库和非关系型数据库 一致性: 事务完成时,必须让所有的数据具有一致的状态,例如要写入100个数据,前99个成功了,结果第100个不合法,此时事务会回滚到最初状态.这样保证事务结束和开始时 ...
- html5 indexDB的使用
angular.module('indexdb', []) .factory('indexDbJs', [function() { const CurDBVersion = 10000; window ...
- HTML5项目笔记10:使用HTML5 IndexDB设计离线数据库
之前的文章(http://www.cnblogs.com/wzh2010/archive/2012/05/22/2514017.html)里面描述了HTML5 离线数据存储的Web SQL,一个基于S ...
- indexDB的使用和异步图片blob文件保存
//调整webkit兼容性 var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || w ...
- 使用ES6 Class封装的IndexDB 操作类,并实现模糊搜索
封装如下: indexDBOperate.js export class IndexDBOperate { db = null // 数据库实例 databaseName = null // 数据库 ...
- JS 客户端(浏览器)存储数据之 localStorage、sessionStorage和indexDB
基本概念 1.localStorage和sessionStorage是HTML5 Web存储的提供的两种存储方式,在IE7以上以及大多数浏览器都是支持的 2.localStorage和sessionS ...
- indexDB的概念
IndexDB利用数据键(key)访问,通过索引功能搜索数据,适用于大量的结构化数据,如日历,通讯簿或者记事本. 1. 以key/value成对保存数据 IndexDB和WebStorage都是以数据 ...
- indexdb开cai发keng实zhi践lu
一直在维护一个用html2canvas截图转base64保存的项目,先不说html2canvas不同版本的不同坑的问题,就说转出来的这个base64字符长度实在太大了,尤其是遇到设计出图高度达到3千多 ...
- indexDB出坑指南
对于入了前端坑的同学,indexDB绝对是需要深入学习的. 本文针对indexDB的难点问题(事务和数据库升级)做了详细的讲解,而对于indexDB的特点和使用方法只简要的介绍了一下.如果你有一些使用 ...
随机推荐
- angular2 post以“application/x-www-form-urlencoded”形式传参的解决办法
angular2 post以“application/x-www-form-urlencoded”形式传参的解决办法 http://blog.csdn.net/tianjun2012/article/ ...
- python获取文件路径, 文件名, 后缀名
def get_filePath_fileName_fileExt(fileUrl): """ 获取文件路径, 文件名, 后缀名 :param fileUrl: :ret ...
- Gridview 尾部添加总计
1.GridView控件showfooter的属性=true 2. int totalZJ, iZJ; protected void GridView1_RowDataBound(object sen ...
- Runtime获取类的属性列表和方法列表
Runtime获取类的属性列表和方法列表 Runtime很强大,他使得OC中没有真正意义上的私有属性和私有方法,我们可以利用OC的运行时拿到一个类的任何方法和任何属性,然后动态的去调用方法,objc_ ...
- 多网卡下,vlc发送IGMP组播报告包
这两天测试IGMP遇到一个问题,环境描述如下: 我的vlc客户端安装在windows下,该PC有两张网卡,本地连接1接公司网,本地链接2 接路由器.wireshark坚挺本地链接2,以测试路由的IGM ...
- svn 图标状态说明
http://blog.csdn.net/coslay/article/details/41980131
- c# 实体处理工具类
using System; using System.Collections; using System.Collections.Generic; using System.ComponentMode ...
- 敏捷BI与数据驱动机制
大数据这件事,整体上还是说的多一些,做的稍微少一点.大数据可以是荒凉高原上波澜壮阔的机房,也可以润物细无声般融入到日常生活和工作.换句话说,大数据应该是一种文化. 在个人层面,很多人对数字和计算并不敏 ...
- SpreadJS 在 Angular2 中支持哪些事件?
SpreadJS 纯前端表格控件是基于 HTML5 的 JavaScript 电子表格和网格功能控件,提供了完备的公式引擎.排序.过滤.输入控件.数据可视化.Excel 导入/导出等功能,适用于 .N ...
- charles抓包--手机端
Fiddler和charles都是抓包工具,可以抓到pc端的请求,手机上设置代理后也可以抓到手机上的请求,也可以修改请求数据和返回的数据. 在接口已经使用的时候,比如说已经用到了app上,app端测试 ...