美文网首页
JS--IndexedDB(非全面指南)

JS--IndexedDB(非全面指南)

作者: 小懒豆 | 来源:发表于2019-04-28 12:17 被阅读0次
    一、 基本概念(中文版)
    二、名词解释(中文版)
    三、 IDBFactory对象(等价window.indexedDB)
    • open(name,version): 返回IDBOpenDBRequest对象,
    • cmp(value1,value2):将两个值作为键进行比较,以确定IndexedDB操作的相等性和排序,例如存储和迭代。返回值 -1为< 0为= 1为>
    • delete​Database() 返回IDBOpenDBRequest对象
    var DBDeleteRequest = window.indexedDB.deleteDatabase("toDoList");
    
    DBDeleteRequest.onerror = function(event) {
      console.log("Error deleting database.");
    };
     
    DBDeleteRequest.onsuccess = function(event) {
      console.log("Database deleted successfully");
        
      console.log(event.result); // should be undefined
    };
    
    四、IDBOpenDBRequest 接口

    blocked事件
    upgradeneeded事件

    var db;
    
    var request = window.indexedDB.open("library", 3);
    
    request.onupgradeneeded = function(event) {
      db = request.result;
     
      db.onerror = function(errorEvent) {
        note.innerHTML += '<li>Error loading database.</li>';
      };
    
      if (event.oldVersion < 1) {
       
        var store = db.createObjectStore("books", {keyPath: "isbn"});
        var titleIndex = store.createIndex("by_title", "title", {unique: true});
        var authorIndex = store.createIndex("by_author", "author");
      }
      if (event.oldVersion < 2) {
       
        var bookStore = request.transaction.objectStore("books");
        var yearIndex = bookStore.createIndex("by_year", "year");
      }
      if (event.oldVersion < 3) {
        var magazines = db.createObjectStore("magazines");
        var publisherIndex = magazines.createIndex("by_publisher", "publisher");
        var frequencyIndex = magazines.createIndex("by_frequency", "frequency");
      }
    };
    
    request.onerror = function(event) {
      console.log(event)
    };
    
    request.onsuccess = function(event) {
      db = request.result;
    };
    
    五、 IDBDatabase对象
    • 事件 :
      • abort:在中断数据库访问时触发
      • error:当访问数据库失败时触发。
      • versionchange:当数据库结构发生更改时触发 close
    • 属性 :
      • name :当前连接数据库名
      • version:当前连接数据库的版本
      • objectStoreNames:当前连接连接数据库中所有的object store 名字列表
    • 方法 :
      • close() :在一个单独的线程中关闭数据库连接并立即返回。
      • create​Object​Store():创建并返回一个新的 object store 或 index
      • delete​Object​Store():此方法只能在 versionchange 事务中被调用。
      • transaction(storeNames,mode):开启一个事务
       // 键生成器和keyPath
        var objectStore = db.createObjectStore("names", { autoIncrement : true }); //键生成器
        var objectStore = db.createObjectStore("customers", { keyPath: "ssn" }); //keyPath
        var objectStore = db.createObjectStore("names", { keyPath: 'id', autoIncrement: true });
    
    六、IDBTransacation对象(事务)
    • 事务提供了三种模式:readonlyreadwriteversionchange
    • 事务接收三种不同的 DOM 事件:errorabortcomplete
    • 事件:upgradeneeded``complete``abort``success``error``blocked``versionchange``close
    • 属性:db error mode object​Store​Names
    • 方法:abort() object​Store()
      // 开启一个事务
      var transaction = db.transaction(["customers"], "readwrite");
    
    • transaction() 方法接受两个参数(一个是可选的)并返回一个事务对象。第一个参数是事务希望跨越的对象存储空间的列表。如果你希望事务能够跨越所有的对象存储空间你可以传入一个空数组。如果你没有为第二个参数指定任何内容,你得到的是只读事务。如果你想写入数据,你需要传入 "readwrite" 标识。
    • 事务方法返回一个包含IDBIndex.objectStore方法的事务对象,使用 IDBIndex.objectStore你可以访问你的对象仓库。
    五、IDBObjectStore对象
    • 属性 : auto​Increment index​Names key​Path name transaction
    • 事件 upgradeneeded complete abort success error blocked versionchange close
    方法 参数 返回 描述
    add() value[, key] IDBRequest add方法只能插入数据。
    clear () IDBRequest
    getAll() [A key or IDBKeyRange[,在找到多个值时要返回的值的数量] IDBRequest
    getAllKeys() 同上 IDBRequest
    count() 参数可以是键,或键范围(key range) IDBRequest
    createIndex() (in DOMString name, in DOMString keyPath, in optional boolean unique) IDBIndex 该方法只能从versionchange事务模式的回调方法中被调用。
    delete 参数可以是键,或键范围(key range) IDBRequest
    deleteIndex (in any DOMString indexName) void 该方法只能从versionchange事务模式的回调方法中被调用。
    get (in any key) IDBRequest 不存在时就像存在记录时一样,但具有undefined值。
    index (in DOMString name) IDBIndex
    openCursor (in optional IDBKeyRange range, in optional unsigned short direction) IDBRequest
    put (in any value, in optional any key) IDBRequest put方法是更新或插入方法。
    六、IDBRequest接口
    六、IDBIndex对象
    六、IDBCursor对象(游标)

    属性 direction key primaryKey source

    // 首先,确定你已经在 request.onupgradeneeded 中创建了索引:
    // objectStore.createIndex("name", "name",{ unique: false });
    // 否则你将得到 DOMException。
    
    var index = objectStore.index("name");
    
    index.get("Donna").onsuccess = function(event) {
      alert("Donna's SSN is " + event.target.result.ssn);
    };
    
    • “name” 游标不是唯一的,因此 name 被设成 "Donna" 的记录可能不止一条。在这种情况下,你总是得到键值最小的那个。

    • 如果你需要访问带有给定 name 的所有的记录你可以使用一个游标。你可以在索引上打开两个不同类型的游标。

      • 一个常规游标映射索引属性到对象存储空间中的对象。
      • 一个键索引映射索引属性到用来存储对象存储空间中的对象的键。不同之处被展示如下:
    index.openCursor().onsuccess = function(event) {
      var cursor = event.target.result;
      if (cursor) {
        // cursor.key 是一个 name, 就像 "Bill", 然后 cursor.value 是整个对象。
        alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
        cursor.continue();
      }
    };
    
    index.openKeyCursor().onsuccess = function(event) {
      var cursor = event.target.result;
      if (cursor) {
        // cursor.key 是一个 name, 就像 "Bill", 然后 cursor.value 是那个 SSN。
        // 没有办法可以得到存储对象的其余部分。
        alert("Name: " + cursor.key + ", SSN: " + cursor.value);
        cursor.continue();
      }
    };
    
    六、IDBKeyRange对象(指定游标的范围和方向)
    • 属性 lower lower​Open upper upper​Open
    • 方法 bound() includes() lower​Bound() only() upper​Bound()
    // 仅匹配 "Donna"
    var singleKeyRange = IDBKeyRange.only("Donna");
    
    // 匹配所有超过“Bill”的,包括“Bill”
    var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
    
    // 匹配所有超过“Bill”的,但不包括“Bill”
    var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
    
    // 匹配所有不超过“Donna”的,但不包括“Donna”
    var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
    
    // 匹配所有在“Bill”和“Donna”之间的,但不包括“Donna”
    var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);
    
    // 使用其中的一个键范围,把它作为 openCursor()/openKeyCursor 的第一个参数
    index.openCursor(boundKeyRange).onsuccess = function(event) {
      var cursor = event.target.result;
      if (cursor) {
        // 当匹配时进行一些操作
        cursor.continue();
      }
    };
    
    • 有时候你可能想要以倒序而不是正序(所有游标的默认顺序)来遍历。切换方向是通过传递 prev 到 openCursor() 方法来实现的:
    objectStore.openCursor(boundKeyRange, "prev").onsuccess = function(event) {
      var cursor = event.target.result;
      if (cursor) {
        // 进行一些操作
        cursor.continue();
      }
    };
    
    • 如果你只是想改变遍历的方向,而不想对结果进行筛选,你只需要给第一个参数传入 null。
    index.openKeyCursor(null, IDBCursor.nextunique).onsuccess = function(event) {
      var cursor = event.target.result;
      if (cursor) {
        // Do something with the entries.
        cursor.continue();
      }
    };
    

    相关文章

      网友评论

          本文标题:JS--IndexedDB(非全面指南)

          本文链接:https://www.haomeiwen.com/subject/pxccgqtx.html