如何使用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的特点和使用方法只简要的介绍了一下.如果你有一些使用 ...
随机推荐
- IceScrum敏捷开发工具的安装文档-官方最新版
Welcome to the iceScrum iceScrum install guide. If you don’t want to manage your own iceScrum instal ...
- redisAPI整理
全局命令 1.查看所有键 keys * 2.键总数 dbsize 3.检查键是否存在 exists key 4.删除键 del key del key1 key2 key3 5.键过期 expire ...
- Zabbix在CentOS7上的安装方法:
).zabbix-server 要安装zabbix-server首先需要安装MySQL数据库,当然你可以将MySQL换成其他的数据库 1.1)创建zabbix数据库:CREATE DATABASE z ...
- C#,WebRequest类、HttpWebRequest类与HttpRequest类的区别
C#,WebRequest类和HttpWebRequest类的区别? httpWebRequest是webRequest的子类,httpWebRequest是基于http协议的 . HttpWebRe ...
- jQuery操作dom事件
参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...
- L151
In Toothy Prequel, Piranha-Like Fish Menaced Jurassic Seas You can call it a prehistoric prequel.Sci ...
- sar工具使用详细介绍
一:命令介绍:参考资料:http://linux.die.net/man/1/sar sar(System ActivityReporter系统活动情况报告)是目前Linux上最为全面的系统性能分析工 ...
- SQL Server(MSSQLSERVER)启动失败,提示“请求失败或服务未及时响应
1.SQL Server(MSSQLSERVER)启动失败,提示“请求失败或服务未及时响应. --------------------------- SQL Server 配置管理器 -------- ...
- pig 自定义udf中读取hdfs 文件
最近几天,在研究怎么样把日志中的IP地址转化成具体省份城市. 希望写一个pig udf IP数据库采用的纯真IP数据库文件qqwry.dat,可以从http://www.cz88.net/下载. 这里 ...
- Android程序员学WEB前端(6)-CSS(1)-选择器-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76576469 觉得博文有用,请点赞,请评论,请关注,谢谢!~ CSS外部文档链接: & ...