java indexeddb_IndexedDB使用与出坑指南
概述
本文通过对IndexedDB的使用方法和使用场景进行相关介绍,对常见的问题进行解答。
同时,因为MDN中的相关文档缺乏相关逻辑性,所以不容易理解。本文将通过项目中常见的数据存储和操作需求来进行内容组织。
读者能够通过本文学会在项目中正确的使用IndexedDB,给应用带来的本地存储能力,并且避免一些常见的问题。
原因:开发者需要在本地进行永久存储
当我们进行一些较大的SPA页面开发时,我们会需要进行一些数据的本地存储。
当数据量不大时,我们可以通过SessionStorage或者LocalStorage来进行存储,但是当数据量较大,或符合一定的规范时,我们可以使用数据库来进行数据的存储。
在浏览器提供的数据库中,共有web sql和IndexedDB两种。相较于HTML5已经废弃的web sql来说,更推荐大家使用IndexedDB。
结构
下面,我们通过一张图来了解下,IndexedDB整体的结构。
类比sql型数据库,IndexedDB中的DB(数据库)就是sql中的DB,而Object Store(存储空间)则是数据表,Item则等于表中的一条记录。
使用IndexedDB
现在,我们将其根据IndexedDB的结构来对其操作进行介绍,能让大家对这个存储空间有一个初步的了解。我们主要介绍:
数据库操作
数据表操作
数据操作
数据库操作
创建或打开数据库
使用IndexedDB第一步,就是创建或打开一个数据库。我们使用window.indexedDB.open(DBName)这个API来打进行操作。具体示例如下:
const request = window.indexedDB.open('test');
request.onupgradeneeded = function (event) {
}
request.onsuccess = function(event) {
//request === event.target;
}
request.onerror = function(event) {}
调用此接口时,如果当前数据库不存在,则会创建一个新的数据库。
当数据库建立连接时,会返回一个IDBOpenDBRequest对象。
在连接建立成功时,会触发onsuccess事件,其中函数参数event的target属性就是request对象。
而在数据库创建或者版本更新时,会触发onupgradeneeded事件。
更新数据库版本号
window.indexedDB.open的第二个参数即为版本号。在不指定的情况下,默认版本号为1。具体示例如下:
const request = window.indexedDB.open('test', 2);
在需要更新数据库的schema(模式)时,需要更新版本号。此时我们指定一个高于之前版本的版本号,就会触发onupgradeneeded事件。类似的,当此数据库不存在时,也会触发此事件并且将版本更新到置顶版本。
我们需要注意的是,版本号是一个Unsigned long long数字,这意味着它可以是一个非常大的整数。但是,它不能是一个小数,否则它将会被转为最近的整数,同时有可能导致onUpgradeneeded事件不触发(bug)。
存储空间操作
创建存储空间
我们使用createObjectStore来创建一个存储空间。同时,使用createIndex来创建它的索引。具体示例如下:
var request = window.indexedDB.open('test', 1);
request.onupgradeneeded = function (event) {
var db = event.target.result;
var objectStore = db.createObjectStore('table1', {keyPath: 'id', autoIncrement: true});
objectStore.createIndex('name', 'name', {unique: false});
}
request.onerror = function (event) {
alert("Why didn't you allow my web app to use IndexedDB?!");
};
注:只能在onupgradeneeded回调函数中创建存储空间,而不能在数据库打开后的success回调函数中创建。
通过createObjectStore能够创建一个存储空间。接受两个参数:
第一个参数,存储空间的名称,即我们上面的customers。
第二个参数,指定存储的keyPath值为存储对象的某个属性,这个属性能够在获取存储空间数据的时候当做key值使用。autoIncrement指定了key值是否自增(当key值为默认的从1开始到2^53的整数时)。
而createIndex能够给当前的存储空间设置一个索引。它接受三个参数:
第一个参数,索引的名称。
第二个参数,指定根据存储数据的哪一个属性来构建索引。
第三个属性, options对象,其中属性unique的值为true表示不允许索引值相等。
数据操作
事务
在IndexedDB中,我们也能够使用事务来进行数据库的操作。事务有三个模式(常量已经弃用):
readOnly,只读。
readwrite,读写。
versionchange,数据库版本变化。
我们创建一个事务时,需要从上面选择一种模式,如果不指定的话,则默认为只读模式。具体示例如下:
const transaction = db.transaction(['customers'], 'readwrite');
事务函数transaction的第一个参数为需要关联的存储空间,第二个可选参数为事务模式。与上面类似,事务成功时也会触发onsuccess函数,失败时触发onerror函数。
事务的操作都是原子性的。
增加数据
当存储空间初始化完成后,我们可以把数据放入存储空间中。直接调用add方法就可以将数据放入存储空间内,具体示例如下:
var request = window.indexedDB.open('test', 1);
request.onsuccess = function (event) {
var db = event.target.result;
var transaction = db.transaction(['table1'], 'readwrite');
var objectStore = transaction.objectStore('table1');
var index = objectStore.index('name');
objectStore.add({name: 'a', age: 10});
objectStore.add({name: 'b', age: 20});
}
注:add方法中的第二个参数key值是指定存储空间中的keyPath值,如果data中包含keyPath值或者此值为自增值,那么可以略去此参数。
查找数据
通过特定值获取数据
当我们需要从存储空间获取数据时,我们可以通过以下的方法:
var request = window.indexedDB.open('test', 1);
request.onsuccess = function (event) {
var db = event.target.result;
var transaction = db.transaction(['table1'], 'readwrite');
var objectStore = transaction.objectStore('table1');
var request = objectStore.get(1);
request.onsuccess = function (event) {
// 对 request.result 做些操作!
console.log(request.result);
};
request.onerror = function (event) {
// 错误处理!
};
}
通过游标获取数据
当你需要便利整个存储空间中的数据时,你就需要使用到游标。游标使用方法如下:
var request = window.indexedDB.open('test', 1);
request.onsuccess = function (event) {
var db = event.target.result;
var transaction = db.transaction(['table1'], 'readwrite');
var objectStore = transaction.objectStore('table1');
var request = objectStore.openCursor();
request.onsuccess = function (event) {
var cursor = event.target.result;
if (cursor) {
// 使用Object.assign方法是为了避免控制台打印时出错
console.log(Object.assign(cursor.value));
cursor.continue();
}
};
request.onerror = function (event) {
// 错误处理!
};
}
使用游标时有一个需要注意的地方,当游标便利整个存储空间但是并未找到给定条件的值时,仍然会触发onsuccess函数。
openCursor和openKeyCursor有两个参数:
第一个参数,遍历范围,指定游标的访问范围。该范围通过一个IDBKeyRange参数的方法来获取。
遍历范围参数具体示例如下:
// 匹配值 key === 1
const singleKeyRange = IDBKeyRange.only(1);
// 匹配值 key >= 1
const lowerBoundKeyRange = IDBKeyRange.lowerBound(1);
// 匹配值 key > 1
const lowerBoundOpenKeyRange = IDBKeyRange.lowerBound(1, true);
// 匹配值 key < 2
const upperBoundOpenKeyRange = IDBKeyRange.upperBound(2, true);
// 匹配值 key >= 1 && key < 2
const boundKeyRange = IDBKeyRange.bound(1, 2, false, true);
index.openCursor(boundKeyRange).onsuccess = function(event) {
const cursor = event.target.result;
if (cursor) {
// Do something with the matches.
cursor.continue();
}
};
第二个参数,便利顺序,指定游标便利时的顺序和处理相同id(keyPath属性指定字段)重复时的处理方法。改范围通过特定的字符串(IDBCursor的常量已经弃用)来获取。其中:
next,从前往后获取所有数据(包括重复数据)
prev,从后往前获取所有数据(包括重复数据)
nextunique,从前往后获取数据(重复数据只取第一条,索引重复即认为重复,下同)
prevunique,从后往前获取数据(重复数据只取第一条)
遍历顺序参数具体示例如下:
var request = window.indexedDB.open('test', 1);
request.onsuccess = function (event) {
var db = event.target.result;
var transaction = db.transaction(['table1'], 'readwrite');
var objectStore = transaction.objectStore('table1');
var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound(1, false);
var request = objectStore.openCursor(lowerBoundOpenKeyRange, IDBCursor.PREV);
request.onsuccess = function (event) {
var cursor = event.target.result;
if (cursor) {
// 使用Object.assign方法是为了避免控制台打印时出错
console.log(Object.assign(cursor.value));
cursor.continue();
}
};
request.onerror = function (event) {
// 错误处理!
};
}
使用索引
在前面构建数据库时,我们创建了两个索引。现在我们也可以通过索引来进行数据检索。他的本质还是通过之前获取数据的API来进行,只是将原来使用的keyPath属性转换成为了索引指定的属性。具体示例如下:
var request = window.indexedDB.open('test', 1);
request.onsuccess = function (event) {
var db = event.target.result;
var transaction = db.transaction(['table1'], 'readwrite');
var objectStore = transaction.objectStore('table1');
var index = objectStore.index('name');
// 第一种,get方法
index.get('a').onsuccess = function (event) {
console.log(event.target.result);
}
// 第二种,普通游标方法
index.openCursor().onsuccess = function (event) {
console.log('openCursor:', event.target.result.value);
}
// 第三种,键游标方法,该方法与第二种的差别为:普通游标带有value值表示获取的数据,而键游标没有
index.openKeyCursor().onsuccess = function (event) {
console.log('openKeyCursor:', event.target.result);
}
}
修改数据
当需要修改存储空间中的数据时,我们可以使用以下的API:
var objectStore = transaction.objectStore("customers");
var request = objectStore.put(data);
request.onsuccess = function (event) {
}
注:put方法不仅能够修改现有数据,也能够往存储空间中增加新的数据。
删除数据
当我们需要删除已经无用的数据时,我们可以通过以下方法:
var objectStore = transaction.objectStore("customers");
var request = objectStore.delete(name);
request.onsuccess = function (event) {
}
异常处理
在浏览器有如下操作的情况下,indexedDB可能会出现异常:
用户清除浏览器缓存
存储空间超过大小限制
此时,需要对错误进行捕获,并且对用户进行提示。此章节不是本文重点,再此略过。
扩展须知
取值相关
key值能够接受的数据类型
在IndexedDB中,键值对中的key值可以接受以下几种类型的值:
number
data
string
binary
array
具体说明可以见文档此处。
key path能够接受的数据类型
当一个key值变为主键,即keyPath时,它的值就只能是以下几种:
Blob
File
Array
String
注:空格不能出现在key path中。
具体说明可以见文档此处。
value能够接受的数据类型
在IndexedDB中,value能够接受ECMA-262中所有的类型的值,例如String,Date,ImageDate等。
事务相关
事务中断后,会不会影响key值的自增
IndexedDB在没有指定key值的时候就会采用自增的key值。如果一个事务在中途中断,那么key值的自增将会从中断的事务开始前的key开始。
安全相关
IndexedDB也受到浏览器同源策略的限制。
用户相关
清空缓存
用户在清除浏览器缓存时,可能会清除IndexedDB中相关的数据。
访问权限
部分浏览器如Safari手机版隐私模式在访问IndexedDB时,可能会出现由于没有权限而导致的异常(LocalStorage也会),需要进行异常处理。
总结
IndexedDB在本地存储中有着无可替代的作用,是替代关系型数据库web sql的产品,能够对大量数据进行存储。在许多需要运用离线存储的场景下,它能够给我们提供有效的支撑。
但是,IndexedDB在使用过程中仍然需要避免可能会出现的一些问题,或者对可能导致的不利影响有一定的容错处理。这样才不会对应用产生重大影响。
参考文献
java indexeddb_IndexedDB使用与出坑指南相关推荐
- java回调函数的生命_indexDB出坑指南
对于入了前端坑的同学,indexDB绝对是需要深入学习的. 本文针对indexDB的难点问题(事务和数据库升级)做了详细的讲解,而对于indexDB的特点和使用方法只简要的介绍了一下.如果你有一些使用 ...
- 2020《图像分割》从入坑到出坑指南
本文经授权转载自机器之心(almosthuman2014),来源:medium,作者:Jakub Czakon,编译:小舟.Racoon.张倩,未经授权禁止二次转载与摘编. 本文长度为2400字,建议 ...
- 史上最简单的UIScrollView+Autolayout出坑指南
##背景 网上有很多使用Storyboard完成UIScrollview的例子,但是纯代码的例子却不多.有限的一些例子大多也是外国开发者用VFL写的.而这篇文章基于swift语言和SnapKit分析了 ...
- PHP中与and、||与or的区别 | php中and 和 出坑指南
在PHP中,&&与and都表示逻辑与,||与or都表示逻辑或,并且它们都是短路运算符.而它们的区别在于运算的优先级不同. <?php $t1=true and false; $t ...
- Java开发者必看避坑指南!人生转折!
一.首先本职工作一定要做好做精 本人之前在干兼职的时候,也忽视过本职工作,从而导致自己落后平均技术水平,虽然之后迎头赶上,但这不能不算是个遗憾.前在接一些活的时候就感觉技术的重要性了,如果当年我技术再 ...
- 【Java】选择结构排坑指南
最近在实践中发现了一个问题,分享一下 众所周知,Java的选择结构和循环结构是允许单行不加大括号的 有的资料上会提倡这种模式,因为可以缩减代码的行数 也有的不提倡,认为可能会在后期添加行数很麻烦以及出 ...
- java正则表达式 %_java正则表达式入坑指南
在日常开发工作中,无论你使用的语言是java.python.shell.golang还是C#, 正则表达式是编程语言中几乎绕不开的话题.有了它,可以帮你快速定位到符合条件的文本内容.今天小编带大家一起 ...
- JAVA程序员M1踩坑指南 2021-08-29
以旧换新 本人于今年1月份以旧换新购买了一台内存8G,存储 512GB的M1,旧机是2015内存8G,存储121GB的,主板进过水,维修过,而且电池也是充不进去电了,还抵扣了2000,大家可以评论我这 ...
- truffle unbox react 出坑指南
最近几天差点就被这鬼东西给逼疯了,truffle init .truffle unbox webpack 不管我怎么运行都是对的,唯独truffle unbox react 不管在哪个windows都 ...
最新文章
- c++ cuda拷贝内存
- JS-DOM Element方法和属性
- 小猪笔记本电脑装linux时需要以下命令
- iTerm2 的配置与美化
- Learn Blockchains by Building One
- 多个DataSet数据合并
- 黑马day16 aptana插件的安装
- Windows下调试hadoop
- C#封装DLL类库,调用类库
- java发送邮件代码
- 408考研题错误之处
- c语言——高精度除法
- 易语言.用修改注册表的方式来关闭win10自带的杀毒软件
- 监听Solidity合约事件
- 一、C语言[typedef、结构体、共用体、枚举体]
- 已有项目如何添加到gitee(码云)仓库
- JS之获取银行卡信息
- R语言将变量分组的三种方法(含cut函数介绍)
- 机票网络售票模拟系统(嵌入式部分)
- “一品四境”学JAVA——书籍推荐/路径规划