IndexDB

洋葱头_
205 阅读4分钟

1、是什么

浏览器端可用的永久缓存数据库。提供可存储大量结构化数据（包含blobs与file）的底层API，该API使用索引对数据库实现高性能的搜索。

2、特点

  • 是一个事务型数据库
  • 是一个基于js的面象对象的数据库
  • 允许您存储和检索用键索引的对象、存储结构化克隆算法支持的任何对象；
  • 同源可操作
  • IndexDB执行操作是异步的

3、如何连接数据库

  • 数据库的访问：IDBFactory

    window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
    var request = window.indexedDB.open("toDoListDB", 4);

    • 打开数据库连接：open(数据库名,版本)
    • 删除数据库：deleteDatabase()
    • 指大小比较：cmp(a, b)
  • 打开数据库：IDBOpenDBRequest当你创建一个新的数据库或者增加已存在的数据库的版本号触发
    • request.onupgradeneeded // 是我们唯一可以修改数据库结构的地方。在这里面，我们可以创建和删除对象存储空间以及构建和删除索引。
    request.onupgradeneeded = function(event) {
  var db = event.target.result; 
  var objectStore = db.createObjectStore('toDoListOBS',{keyPath: 'name'}) // 创建对象存储
  objectStore.createIndex('name', 'name', {unique: false}) // 增加索引
  objectStore.transaction.oncomplete=function(e){ // 对象存储已创建完毕
      
  }
  
  // 打开一个对象存储的事务。你可以同时执行多个 readnoly 事务，哪怕它们的作用域有重叠；但对于在一个对象仓库上你只能运行一个 readwrite 事务。
  const otherTransacton = db.transaction(['toDoListOBS'],'readwrite')
  // 在所有数据添加完毕后的处理
  otherTransacton.oncomplete = function(event) {
    alert("All done!");
  };
   otherTransacton.onerror = function(event) {
    alert("error!");
  };
   const otherObjectStore = otherTransacton.ObjectStore('toDoListOBS');
   // toDoListOBS中增加数据
   const request = otherObjectStore.add({name: '234'})
   // 删除
   const request1 = otherObjectStore.delete('234')
   // 获取
   const request2 = otherObjectStore.get('234')
   request2.onsuccess = function(event) {
       const result = event.target.result
       result.name = '234567'
       // 修改
       otherObjectStore.put(result)
   }
   // 游标
   objectStore.openCursor().onsuccess = function(event) {
       const cursor = event.target.result
       cursor.continue() // 下一个，直到cursor为undefined
   }
   // 根据索引检索
   const index = objectStore.index('name')
   index.get('dname').onsuccess = function(e){console.log(e.target.result)} // 不唯一时获取键最小的一个
   // 一个常规游标映射索引属性到对象存储空间中的对象，IDBKeyRange过滤的范围
   index.openCursor([IDBKeyRange], '遍历顺序').onsuccess=function(){}
   // 一个键索引映射索引属性到用来存储对象存储空间中的对象的键
   index.openKeyCursor().onsuccess=function(){}
}
    • request.onsuccess=function(event){ db = event.target.result; } // 数据库打开成功/onupgradeneeded中的方法执行完毕即对象存储操作完毕
    • request.onerror=function(e){ db = event.target.result; } // 异常
  • 创建事务：IDBDatabase提供唯一一个能够访问和管理数据库版本的数据库连接后后，使用 IDBDatabase 对象在数据库中打开一个事务, 然后进行操作或者删除数据库中的对象.方法继承自EventTarget
    • db.close()：关闭数据库
    • db.createObjectStore():创建并返回一个新的 object store 或者 index。
    • db.deleteObjectStore():删除在当前连接的数据库中的 object store 和 相关的索引
    • db.transaction():立即返回一个包含 IDBTransaction.objectStore 方法的 transaction 对象。你可以用这个对象来操作 object store。这个操作是在一个单独的线程中执行的。
    • db.name: 数据库名称（只读）
    • db.version：数据库版本（只读）
    • db.objectStoreNames：当前连接连接数据库中所有的 object store 名字列表。
    • db.onabort事件：在中断数据库访问时触发。
    • db.onerror事件：当访问数据库失败时触发。
    • db.onversionchange事件：当数据库结构发生更改时触发

4、如何接收/修改数据

  • 事务操作：方法继承自EventTarget
    • db：已连接的数据库事务（只读）
    • durability：事务的持久值（只读）
    • error:异常类型，正常时返回null
    • mode：readonly、readwrite、versionchange（只读）
    • objectStoreNames：该数据库的所有对象存储名（只读）
    • abort()：事务回滚
    • objectStore()：返回一个对象存储
    • commit()：提交事务
    • abort事件
    • complete事件
    • error事件
  • IDBRequest 处理数据库请求并提供对结果访问的通用接口。 方法继承自EventTarget
    var request = window.indexedDB.open('数据库名称');
    • result：
    • error：AbortError、ConstraintError、QuotaExceededError、UnknownError、NoError、VersionError
    • source:
    • transaction：
    • readyState:DONE、LOADING
    • onerror:
    • onsuccess:
  • 对象存储区:IDBObjectStore：表示允许访问通过主键查找的 IndexedDB 数据库中的一组数据的对象存储区。
    • indexNames：表中对象的索引名列表。
    • keyPath：表中的键路径，如果该属性为 null，每次操作表时必须提供一个键名。
    • name：表名
    • transaction：事务的名称，该表属于此事务。
    • autoIncrement：表中自增字段的值
    • add()
    • clear()
    • count()
    • createIndex()
    • delete()
    • deleteIndex()
    • get()
    • getAll()
    • getAllKeys()
    • index()
    • openCursor()
    • put()
  • IDBIndex异步获取数据库中一个index的功能
  • IDBCursor迭代对象存储和索引
  • IDBCursorWithValue迭代对象存储和索引并返回游标的当前值。
  • IDBKeyRange定义可用于从特定范围内的数据库检索数据的键范围。
    • lower:只读，下限值
    • upper:只读，上限值
    • lowerOpen:只读，false（包含下限）
    • upperOpen只读，false（包含上限）
    • bound():创建一个上下限范围
    • only():仅包含该值
    • lowerBloud():仅包含下限
    • upperBound():仅包含上限
    • includes():特定值是否包含在内

5、存储限制

  • 览器的最大存储空间是动态的——它取决于您的硬盘大小。 全局限制为可用磁盘空间的 50％。在 Firefox 中，一个名为 Quota Manager 的内部浏览器工具会跟踪每个源用尽的磁盘空间，并在必要时删除数据。还有另一个限制称为组限制——这被定义为全局限制的 20％，但它至少有 10 MB，最大为 2GB。每个源都是一组（源组）的一部分。每个 eTLD+1 域都有一个组。
  • 达到限制后有两种不同的反应：
    • 组限制也称为“硬限制”：它不会触发源回收。
    • 全局限制是一个“软限制”，因为其有可能释放一些空间并且这个操作可能持续。

5、同类对比

webStorage、localForage、dexie.js、PouchDB、idb、idb-keyval、JsStore 或者 lovefield

avatar
文章
阅读
粉丝