控制台

  • IndexedDB下为数据库
  • 数据库下为表,表内容展现为主键值和其余值,其中其余值包括索引和其他任意字段,以对象形式表现
  • 表下为索引字段表,用来展现拥有同一种索引字段的所有数据(有多少种索引就会有多少张对应的表)
  • 控制台显示会有不同步现象,当可能有出入时会有黄色感叹号提醒,可以通过刷新当前数据库获得最新状态

——————————————————————————————————————————————————————————

IndexedDB概况

  • indexedDB也遵从同源协议
  • API包含异步(asynchronous) API 和同步(synchronous)API两种。 异步API适合大多数情况, 同步API必须同 WebWorkers一同使用. 目前,没有主流浏览器支持同步API。
  • IndexedDB 是key-value型数据库(简单好使)

基本概念

  • IndexedDB 数据库使用 key-value 键值对储存数据。key可以是二进制对象。
  • IndexedDB API提供了索引(indexes)、表(tables)、指针(cursors)等等
  • 事务(transaction)有生存周期,在生存周期以后使用它会报错。并且,事务(transaction)是自动提交的,不可以手动提交。
  • 事务是为了避免异步操作可能产生的读写冲突
  • IndexedDB在结果准备好之后通过DOM事件通知用户 DOM事件总是有一个类型(type)属性(在IndexedDB中,该属性通常设置为success或error)。DOM事件还有一个目标(target)属性,用来告诉事件是被谁触发的。通常情况下,目标(target)属性是数据库操作生成的IDBRequest。成功(success)事件不弹出提示并且不能撤销,错误(error)事件会弹出提示且可以撤销。这一点是非常重要的,因为除非错误事件被撤销,否则他们会终止所在的任何事务。
  • IndexedDB是面向对象的。(可以根据储存的对象类型在同一张表中建立不同的索引进行区分)

名词解释

数据库

  • 当操作系统被告知去写入数据后 IDBTransaction.oncomplete 事件被触发(如果操作系统崩溃或在数据被写入磁盘前断电,那么整个事务都将丢失)
  • 对象仓库中的的数据以 keys 升序排列。(根据主键排序?)
  • 对象存储可以有一个 key generator 和一个 key path。如果对象仓库有 key path,则使用 in-line keys; 否则使用 out-of-line keys
    • 键生成器(key generator)自动递增添加主键
    • 键路径(key path)一个合法的键路径可以是以下形式:一个空字符串,一个 JavasScript 标识符,或由句点分割的多个 JavaScript 标识符。但不能包括空格。(主键)
    • 内键(in-line key)作为存储值一部分的键。(主键和其他值都被一起保存在value中)
    • 外键(out-of-line key)与值分开存储的键。
  • 一个比当前版本号更高的值去打开数据库。这会开启一个 VERSION_CHANGE 事务并且触发 upgradeneeded 事件。只有在该事件的处理函数中才能更新数据库模式。
  • 一个给定的数据库可以同时拥有多个连接。
  • 任何对于数据库中的数据读和修改的操作只能在事务中进行
  • 一个数据库连接可以拥有多个与之关联的事务,只要进行写操作事务的作用域不相互重合。事务的作用域在事务被创建时就被确定,指定事务能够进行交互的对象仓库(object store),作用域一旦被确定就会在整个生命周期中保持不变。对于读操作的事务,你可以同时拥有多个,即使他们有重叠的作用域。
  • 事务被期望拥有较短的生命周期,所以浏览器会终止一个消耗时间过长的事务,为了释放存储资源,运行过久的事务会被锁定。你可以中断一个事务,来回滚事务中对数据库进行的操作。并且你甚至不需要等待事务开始或激活就可以中断它。(对同一条数据记录所有影响到该数据事务,回滚时执行能够产生反效果的SQL?)
  • 事务有三种模式:读写、只读和版本变更。创建和删除对象仓库(object store)的唯一方法就是通过调用版本变更事务。
  • 因为所有的事情都在事务中发生
  • 索引(index)(一个新的表以索引字段为主键,以被索引表中的主键为值)

键和值

  • 键可以是以下数据类型:字符串、日期、浮点和数组。对于数组,键的取值可以从空数组到无穷。并且你可以使用嵌套数组。
  • 值可以包含任何 JavaScript 表达式,包括:布尔、数字、字符串、日期、对象、数组、正则、未定义和 null。
  • 主键(key)是默认建立索引的属性。比如,数据记录是{ id: 1, name: '张三' },那么id属性可以作为主键。主键也可以指定为下一层对象的属性,比如{ foo: { bar: 'baz' } }的foo.bar也可以指定为主键。

范围和作用域

  • 游标(cursor)在键的某个范围内迭代查询多条记录的机制。游标有一个指向正在被迭代的对象仓库或索引的源。它处于该范围内的一个位置,并按照键的顺序正向或逆向的移动。

局限性

  • 全文搜索。IndexedDB 接口没有类似 SQL 语句中 LIKE 的功能。

————————————————————————————————————————————————————————

IndexedDB

  • IndexedDB 在 Web Worker 中可用

接口

  • 在window对象的indexedDB属性上调用open()方法。该方法返回一个 IDBRequest对象
  • 异步操作通过在 IDBRequest对象上触发事件来和调用程序进行通信
  • IDBRequest 处理数据库请求并提供对结果访问的通用接口。(所有异步操作的继承类?)
  • IDBFactory 提供数据库访问。这是全局对象indexedDB实现的接口,因此是API的入口。(indexedDB的父类?)

连接数据库

  • IDBOpenDBRequest 表示一个打开数据库的请求。
var DBOpenRequest = window.indexedDB.open("toDoList", 4);DBOpenRequest.onerror = function(event) {};DBOpenRequest.onsuccess = function(event) {};DBOpenRequest.onupgradeneeded = function(event) { // 升级、新建版本}
  • IDBDatabase 表示一个数据库连接。这是在数据库中获取交易的唯一方式。(用来修改表结构(添加删除表,修改索引等)或者获取事务)
var DBOpenRequest = window.indexedDB.open("toDoList", 4);DBOpenRequest.onsuccess = function(event) {db = DBOpenRequest.result; // IDBDatabase 应该是指这个};

接收和修改数据

  • IDBTransaction 表示一个交易。在数据库上创建一个交易,指定作用域(例如要访问的存储对象),并确定所需的访问类型(只读或读写)。事务对象提供error、abort和complete三个事件,用来监听操作结果。

    • 写入数据需要新建一个事务。新建时必须指定表格名称和操作模式("只读"或"读写")
// 应该是指一个交易(事务)
var trans1 = db.transaction("foo", "readwrite");
  • IDBObjectStore 表示允许访问通过主键查找的IndexedDB数据库中的一组数据的对象存储区。(通过事务获得,代表对象仓库)
var objectStore1 = trans1.objectStore("foo")objectStore1.put("1", "key");
  • IDBCursor 迭代对象存储和索引。(指针对象)
function readAll() {var objectStore = db.transaction('person').objectStore('person');objectStore.openCursor().onsuccess = function (event) {var cursor = event.target.result;if (cursor) {console.log('Id: ' + cursor.key);console.log('Name: ' + cursor.value.name);console.log('Age: ' + cursor.value.age);console.log('Email: ' + cursor.value.email);cursor.continue();} else {console.log('没有更多数据了!');}};
}readAll();
  • IDBIndex 也是为了允许访问IndexedDB数据库中的数据子集,但使用索引来检索记录而不是主键。这有时比使用IDBObjectStore更快。
var transaction = db.transaction(['person'], 'readonly');
var store = transaction.objectStore('person');
var index = store.index('name');
var request = index.get('李四');request.onsuccess = function (e) {var result = e.target.result;if (result) {// ...} else {// ...}
}
  • IDBCursorWithValue 迭代对象存储和索引并返回游标的当前值。
// 缺少
  • IDBKeyRange 定义可用于从特定范围内的数据库检索数据的键范围。(主键集合)
  var keyRangeValue = IDBKeyRange.bound("A", "F"); // IDBKeyRange用于创建检索范围var transaction = db.transaction(['fThings'], 'readonly');var objectStore = transaction.objectStore('fThings');objectStore.openCursor(keyRangeValue).onsuccess = function(event) {...}

自定义事件接口

  • IDBVersionChangeEvent 作为IDBOpenDBRequest.onupgradeneeded事件的处理程序的结果(作为事件参数获得)

转载于:https://www.cnblogs.com/qq3279338858/p/10971975.html

IndexedDB基本概念相关推荐

  1. 前端——IndexedDB

    本文仅梳理indexedDB基础概念以及对象,具体执行需要自行查阅api IndexedDB 概念 HTML5离线存储数据的一种解决方案,NOSQL类型,浏览器提供的数据库,使用索引高效搜索数据进行读 ...

  2. 浏览器数据库 IndexedDB

    浏览器数据库 IndexedDB 随着浏览器的功能不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少从服务器获取数据,直接从本地获取数据. 现有的浏览器数据储存方案,都不适合储存大 ...

  3. IndexedDB浏览器本地存储、缓存、数据库、介绍

    目录 1.前言 2.IndexedDB简介 3.IndexedDB使用场景 4.IndexedDB特点 4.1.非关系型数据库 NoSql 4.2.持久化存储 4.3.异步操作 4.4.支持事务 4. ...

  4. IndexedDB 打造靠谱 Web 离线数据库

    在知乎和我在平常工作中,常常会看到一个问题: 前端现在还火吗? 这个我只想说: 隔岸观火的人永远无法明白起火的原因,只有置身风暴,才能找到风眼之所在 --『秦时明月』 你 TM 看都不看前端现在的发展 ...

  5. 深度讲解:web前端性能优化

    一.课程简介: 1.课程大纲 涉及到的分类 网络层面 构建层面 浏览器渲染层面 服务端层面 涉及到的功能点 资源的合并与压缩 图片编解码原理和类型选择 浏览器渲染机制 懒加载预加载 浏览器存储 缓存机 ...

  6. 浏览器本地mysql_IndexedDB:浏览器里的本地数据库

    IndexedDB 是什么 在现代浏览器的本地存储方案中,indexedDB 是一项重要的能力组成, 它是可以在浏览器端使用的本地数据库,可以存储大量数据,提供接口来查询,还可以建立索引,这些都是其他 ...

  7. IndexedDB_Web 离线数据库

    IndexedDB_Web 离线数据库 本文会从头剖析一下 IndexedDB 在前端里面的应用的发展. indexedDB 目前在前端慢慢得到普及和应用.它正朝着前端离线数据库技术的步伐前进.以前一 ...

  8. java indexeddb_IndexedDB 打造靠谱 Web 离线数据库

    在知乎和我在平常工作中,常常会看到一个问题: 前端现在还火吗? 这个我只想说: 隔岸观火的人永远无法明白起火的原因,只有置身风暴,才能找到风眼之所在 --『秦时明月』 你 TM 看都不看前端现在的发展 ...

  9. HTML5本地存储IndexedDB基础使用

    做项目时需要用H5本地存储,感觉还不错 下面是一些基础知识和一个完整的实例 HTML5 的一个重要特性是本地数据持久性,它使用户能够在线和离线访问 Web 应用程序.此外,本地数据持久性使移动应用程序 ...

最新文章

  1. zabbix3.2.6.1升级3.4.4图文心得
  2. spring-注入list集合对象(值是对象)
  3. 【JavaScript脚本】——T1基本语法
  4. Android开发之限制输入框长度 | 限制EditText输入长度 | 限制AppCompatEditText长度的方法
  5. C#最佳工具集合:IDE、分析、自动化工具等
  6. 00005在java结果输出_Java-005-运算符详解
  7. JDBC数据库编程:callableStatement接口
  8. Visual Studio 2010 实用功能总结 II
  9. Contrastive Loss
  10. Filezilla Xshell SecureFX Win10等无法拖放文件(本地或线上)解决办法
  11. 灵性图书馆:好书推荐-《荷欧波诺波诺的幸福奇迹》
  12. 【分享】Python的QQ群
  13. 图形杂记-Decal贴花
  14. HBuilder开发旅游类APP(三) ----- 给APP添加底部导航栏(底部选项卡)
  15. ArcGIS小知识(五)——arcmap锁定图层-编辑时只选择唯一图层
  16. ida-IDC脚本剖析
  17. 我“胡汉三”又回来了。
  18. 线上出 BUG 原因竟是 Spring 父子容器,反手我就去扒了它的底裤
  19. 旧文备份:热电偶/热电偶分度表生成
  20. P2300 合并神犇 DP

热门文章

  1. 类型转为数字_JavaScript自动数据类型的转换
  2. pytorch torch.nn.Module.register_buffer
  3. pytorch torch.narrow
  4. python os.getpidos.getppid
  5. linux /etc/passwd
  6. Spark TopN
  7. pillow api
  8. Excel字符串比较(exact)
  9. android+噪音测试,关于噪音测试App的选择与使用
  10. Linux rpm命令详解