您的位置:澳门新葡8455最新网站 > Web前端 > 骨干接纳

骨干接纳

发布时间:2019-10-10 21:44编辑:Web前端浏览(135)

    indexedDB 基本选拔

    2017/12/14 · 基本功技艺 · 1 评论 · IndexedDB

    原版的书文出处: 党黎明   


    indexedDB简介:

    indexedDB 是一种选用浏览器存款和储蓄大量数额的方法.它创建的数目足以被询问,并且可以离线使用.

     

    indexedDB 有以下特征:

    1. indexedDBWebSQL 数据库的代替品
    2. indexedDB依据同源公约(只好访谈同域中蕴藏的数码,而不可能访问别的域的)
    3. API包含异步API同步API三种:好些个场地下行使异步API; 同步API必须同 WebWorkers 一同行使, 这几天并未有浏览器协助同步API
    4. indexedDB 是业务情势的数据库, 使用 key-value 键值对积累数据
    5. indexedDB 不选择结构化查询语言(SQL). 它经过索引(index)所产生的指针(cursor)来形成查询操作

    一、使用indexedDB的基本情势

    1. 开采数据库而且最早三个事情。
    2. 创制贰个 objecStore
    3. 创设三个伸手来实践一些数据库操作,像扩充或提取数据等。
    4. 经过监听精确类型的 DOM 事件以等待操作实现。
    5. 在操作结果上进展局地操作(能够在 request 对象中找到)

    二、创设、张开数据库

    indexedDB 存在于全局对象window上, 它最要害的三个办法正是open措施, 该办法接收七个参数:

    • dbName // 数据库名称 [string]
    • version // 数据库版本 [整型number]

    var DB_NAME = 'indexedDB-test', VERSION = 1, db; var request = indexedDB.open(DB_NAME, VE科雷傲SION); request.onsuccess = function(event) { db = event.target.result; // console.log(event.target === request); // true db.onsuccess = function(event) { console.log('数据库操作成功!'); }; db.onerror = function(event) { console.error('数据库操作产生错误!', event.target.errorCode); }; console.log('展开数据库成功!'); }; request.onerror = function(event) { console.error('创造数据库出错'); console.error('error code:', event.target.errorCode); }; request.onupgradeneeded = function(event) { // 更新指标存储空间和目录 .... };

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    var DB_NAME = 'indexedDB-test', VERSION = 1, db;
    var request = indexedDB.open(DB_NAME, VERSION);
    request.onsuccess = function(event) {
        db = event.target.result;
        // console.log(event.target === request); // true
        db.onsuccess = function(event) {
            console.log('数据库操作成功!');
        };
        db.onerror = function(event) {
            console.error('数据库操作发生错误!', event.target.errorCode);
        };
        console.log('打开数据库成功!');
    };
    request.onerror = function(event) {
        console.error('创建数据库出错');
        console.error('error code:', event.target.errorCode);
    };
    request.onupgradeneeded = function(event) {
       // 更新对象存储空间和索引 ....
    };

    假使本域下不设著名为DB_NAME的数据库,则上述代码会创设八个名字为DB_NAME、版本号为VERSION的数据库; 触发的事件依次为: upgradeneededsuccess.

    譬如已存在名称叫DB_NAME的数据库, 则上述代码会展开该数据库; 只接触success/error事件,不会触发upgradeneeded事件. db是对该数据库的引用.

    三、创立对象存款和储蓄空间和目录

    在关系型数据库(如mysql)中,三个数据库中会有多张表,每张表有各自的主键、索引等;

    key-value型数据库(如indexedDB)中, 一个数据库会有七个目的存款和储蓄空间,每种存款和储蓄空间有友好的主键、索引等;

    成立对象存款和储蓄空间的操作经常位于创制数据库成功回调里:

    request.onupgradeneeded = function(event) { // 更新指标存款和储蓄空间和目录 .... var database = event.target.result; var objectStore = database.createObjectStore("movies", { keyPath: "id" }); objectStore.createIndex('alt', 'alt', { unique: true }); objectStore.createIndex('title', 'title', { unique: false }); };

    1
    2
    3
    4
    5
    6
    request.onupgradeneeded = function(event) { // 更新对象存储空间和索引 ....
        var database = event.target.result;
        var objectStore = database.createObjectStore("movies", { keyPath: "id" });
        objectStore.createIndex('alt', 'alt', { unique: true });
        objectStore.createIndex('title', 'title', { unique: false });
    };

    图片 1

    onupgradeneeded 是大家独一可以修改数据库结构的地方。此中,大家能够创立和删除对象存款和储蓄空间以至创设和删除索引。

    在数据库对象database上,有以下方式可供调用:

    1. createObjectStore(storeName, configObj) 创设三个目的存款和储蓄空间
      • storeName // 对象存款和储蓄空间的名称 [string]
      • configObj // 该目的存款和储蓄空间的布置 [object] (当中的key帕特h属性值,标记对象的该属性值独一)
    2. createIndex(indexName, objAttr, configObj) 创建三个索引
      • indexName // 索引名称 [string]
      • objAttr // 对象的习性名 [string]
      • configObj // 该索引的配备对象 [object]

    四、增删数据

    对数据库的操作(增加和删除查改等)都亟需经过事务来完成,事务具备二种格局:

    • readonly 只读(能够并发举行,优先选用)
    • readwrite 读写
    • versionchange 版本改动

    向数据库中加进数据

    眼下提到,增添数据必要通过事务事务的利用办法如下:

    var transaction = db.transaction(['movies'], 'readwrite'); transaction.oncomplete = function(event) { console.log('事务完毕!'); }; transaction.onerror = function(event) { console.log('事务战败!', event.target.errorCode); }; transaction.onabort = function(event) { console.log('事务回滚!'); };

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var transaction = db.transaction(['movies'], 'readwrite');
    transaction.oncomplete = function(event) {
        console.log('事务完成!');
    };
    transaction.onerror = function(event) {
        console.log('事务失败!', event.target.errorCode);
    };
    transaction.onabort = function(event) {
        console.log('事务回滚!');
    };

    图片 2数据库对象的transaction()措施接收多个参数:

    • storeNames // 对象存款和储蓄空间,能够是目的存款和储蓄空间名称的数组,也足以是单个对象存款和储蓄空间名称,必传 [array|string]
    • mode // 事务方式,下边提到的二种之一,可选,暗中同意值是readonly [string]

    如此,我们获得一个业务对象transaction, 有两种事件恐怕会被触发: complete, error, abort. 今后,大家透过业务向数据库indexedDB-test的 对象存款和储蓄空间movies中插入数据:

    var objectStore = transaction.objectStore('movies'); // 钦定对象存款和储蓄空间 var data = [{ "title": "寻梦环游记", "year": "2017", "alt": "", "id": "20495023" }, { "title": "你在哪", "year": "2016", "alt": "", "id": "26639033" }, { "title": "笔仙咒怨", "year": "2017", "alt": "", "id": "27054612" }]; data.forEach(function(item, index){ var request = objectStore.add(item); request.onsuccess = function(event) { console.log('插入成功!', index); console.log(event.target.result, item.id); // add()方法调用成功后result是被抬高的值的键(id) }; });

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    var objectStore = transaction.objectStore('movies');  // 指定对象存储空间
    var data = [{
      "title": "寻梦环游记",
      "year": "2017",
      "alt": "https://movie.douban.com/subject/20495023/",
      "id": "20495023"
    }, {
      "title": "你在哪",
      "year": "2016",
      "alt": "https://movie.douban.com/subject/26639033/",
      "id": "26639033"
    }, {
      "title": "笔仙咒怨",
      "year": "2017",
      "alt": "https://movie.douban.com/subject/27054612/",
      "id": "27054612"
    }];
    data.forEach(function(item, index){
        var request = objectStore.add(item);
        request.onsuccess = function(event) {
            console.log('插入成功!', index);
            console.log(event.target.result, item.id); // add()方法调用成功后result是被添加的值的键(id)
        };
    });

    图片 3

    经过业务对象transaction,在objectStore()主意中钦定对象存款和储蓄空间,就收获了足以对该目的存款和储蓄空间扩充操作的指标objectStore.

    向数据库中扩展数量,add()措施增添的对象,假若数据库中已存在同样的主键,只怕独一性索引的键值重复,则该条数据不会插入进去;

    扩张数据还大概有三个主意: put(), 使用办法和add()分化之处在于,数据库中若存在同样主键只怕独一性索引重复,则会更新该条数据,不然插入新数据。

    从数据库中删除数据

    去除数据接纳delete措施,同上类似:

    var request = db.transaction(['movies'], 'readwrite') .objectStore('movies') .delete('27054612'); // 通过键id来删除 request.onsuccess = function(event) { console.log('删除成功!'); console.log(event.target.result); };

    1
    2
    3
    4
    5
    6
    7
    8
    var request =
        db.transaction(['movies'], 'readwrite')
          .objectStore('movies')
          .delete('27054612');  // 通过键id来删除
    request.onsuccess = function(event) {
        console.log('删除成功!');
        console.log(event.target.result);
    };

     

    从数据中获取数据

    获取数据使用get措施,同上类似:

    var request = db.transaction('movies') .objectStore('movies') .get('9999682'); // 通过键alt来获取 request.onsuccess = function(event) { console.log('获取成功!', event.target.result); };

    1
    2
    3
    4
    5
    6
    7
    var request =
        db.transaction('movies')
           .objectStore('movies')
           .get('9999682');  // 通过键alt来获取
    request.onsuccess = function(event) {
        console.log('获取成功!', event.target.result);
    };

    五、使用索引

    在前方,大家创制了八个目录alttitle, 配置对象里面的unique质量标识该值是不是独一

    现行反革命我们想找到alt属性值为https://movie.douban.com/subject/26639033/的指标,就足以行使索引。

    var alt = ''; var objectStore = db.transaction('movies').objectStore('movies'); // 张开对象存款和储蓄空间 var index = objectStore.index('alt'); // 使用索引'alt' var request = index.get(alt); // 创制三个查找数据的呼吁 request.onsuccess = function(event) { console.log('The result is:', event.target.result); }; var noDataTest = index.get('testalt'); // 未有该对象时的测试noDataTest.onsuccess = function(event) { console.log('success! result:', event.target.result); }; noDataTest.onerror = function(event) { console.log('error! event:', event); };

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    var alt = 'https://movie.douban.com/subject/26639033/';
    var objectStore = db.transaction('movies').objectStore('movies');  // 打开对象存储空间
    var index = objectStore.index('alt');  // 使用索引'alt'
    var request = index.get(alt);          // 创建一个查找数据的请求
    request.onsuccess = function(event) {
        console.log('The result is:', event.target.result);
    };
    var noDataTest = index.get('testalt');  // 没有该对象时的测试
    noDataTest.onsuccess = function(event) {
        console.log('success! result:', event.target.result);
    };
    noDataTest.onerror = function(event) {
        console.log('error! event:', event);
    };

    图片 4

    采纳唯一性索引,我们得以博得独一的一条数据(恐怕undefined),那么使用非独一性索引呢?
    我们向数据库中插入一条数据,使title重复:

    db.transaction('movies', 'readwrite').objectStore('movies') .add({ alt: '', title: '寻梦环游记', year: '2017', id: '123456789' }) .onsuccess = function(event) { console.log('插入成功!'); };

    1
    2
    3
    4
    5
    6
    7
    db.transaction('movies', 'readwrite').objectStore('movies')
    .add({ alt: 'https://movie.douban.com/subject/27054612121/',
        title: '寻梦环游记',
        year: '2017',
        id: '123456789'
    })
    .onsuccess = function(event) { console.log('插入成功!'); };

    应用索引title获取title值为寻梦环游记的对象:

    var indexName = 'title', title = '寻梦环游记'; var objectStore = db.transaction('movies').objectStore('movies'); var index = objectStore.index(indexName); // 使用索引'alt' var request = index.get(title); // 创造贰个物色数据的央浼 request.onsuccess = function(event) { console.log('The result is:', event.target.result); };

    1
    2
    3
    4
    5
    6
    7
    var indexName = 'title', title = '寻梦环游记';
    var objectStore = db.transaction('movies').objectStore('movies');
    var index = objectStore.index(indexName);  // 使用索引'alt'
    var request = index.get(title);          // 创建一个查找数据的请求
    request.onsuccess = function(event) {
        console.log('The result is:', event.target.result);
    };

    图片 5

    我们赢得的是键值小小的的不得了对象.

    应用二次索引,大家不得不获得一条数据; 要是我们要求获得全数title属性值为寻梦环游记的目的,大家得以使用游标.

    六、使用游标

    收获叁个能够操作游标的乞求对象有多个点子:

    • openCursor(keyRange, direction)
    • openKeyCursor(keyRange, direction)
      那四个艺术接收的参数同样, 五个参数都以可选的: 第2个参数是限量值得范围,第二个参数是点名游标方向

    游标的运用有以下几处:

    • 在指标存款和储蓄空间上利用: var cursor = objectStore.openCursor()
    • 在目录对象上行使: var cursor = index.openCursor()

    在对象存款和储蓄空间上使用游标

    选拔游标常见的一种方式是获得对象存款和储蓄空间上的有所数据.

    var list = []; var objectStore = db.transaction('movies').objectStore('movies'); objectStore.openCursor().onsuccess = function(event) { var cursor = event.target.result; if (cursor) { console.log('cursor:', cursor); list.push(cursor.value); cursor.continue(); } else { console.log('Get all data:', list); } };

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var list = [];
    var objectStore = db.transaction('movies').objectStore('movies');
    objectStore.openCursor().onsuccess = function(event) {
        var cursor = event.target.result;
        if (cursor) {
            console.log('cursor:', cursor);
            list.push(cursor.value);
            cursor.continue();
        } else {
            console.log('Get all data:', list);
        }
    };

    图片 6

    利用游标时,要求在中标回调里获得result指标,决断是或不是取完了数额:若数据已取完,resultundefined; 若未取完,则result是个IDBCursorWithValue对象,需调用continue()办法继续取多少。 也得以依照自个儿要求, 对数码开展过滤。

    indexedDB2行业内部中,在目标存款和储蓄空间对象上纳入了叁个getAll()主意,能够拿到具备指标:

    objectStore.getAll().onsuccess = function(event) { console.log('result:', event.target.result); };

    1
    2
    3
    objectStore.getAll().onsuccess = function(event) {
        console.log('result:', event.target.result);
    };

    在目录上选用游标

    随着本文上述使用索引的例子,在目录title上使用openCursor()艺术时,若不传参数,则会遍历全体数据,在中标回调中的到的result目的有以下属性:

    • key 数据库中那条对象的title属性值
    • primaryKey 数据库中那条对象的alt
    • value 数据库中那条对象
    • direction openCursor()方法传入的第四个对象,暗中认可值为next
    • source IDBIndex对象 比方如下:
    var index = db .transaction('movies')
    .objectStore('movies').index('title'); index.openCursor().onsuccess
    = function(event) { var cursor = event.target.result; if (cursor) {
    console.log('cursor:', cursor); cursor.continue(); } };
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f37afae763506229096-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f37afae763506229096-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f37afae763506229096-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f37afae763506229096-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f37afae763506229096-5">
    5
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f37afae763506229096-6">
    6
    </div>
    <div class="crayon-num" data-line="crayon-5b8f37afae763506229096-7">
    7
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f37afae763506229096-8">
    8
    </div>
    <div class="crayon-num" data-line="crayon-5b8f37afae763506229096-9">
    9
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f37afae763506229096-10">
    10
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f37afae763506229096-1" class="crayon-line">
    var index = db
    </div>
    <div id="crayon-5b8f37afae763506229096-2" class="crayon-line crayon-striped-line">
    .transaction('movies')
    </div>
    <div id="crayon-5b8f37afae763506229096-3" class="crayon-line">
    .objectStore('movies').index('title');
    </div>
    <div id="crayon-5b8f37afae763506229096-4" class="crayon-line crayon-striped-line">
    index.openCursor().onsuccess = function(event) {
    </div>
    <div id="crayon-5b8f37afae763506229096-5" class="crayon-line">
      var cursor = event.target.result;
    </div>
    <div id="crayon-5b8f37afae763506229096-6" class="crayon-line crayon-striped-line">
      if (cursor) {
    </div>
    <div id="crayon-5b8f37afae763506229096-7" class="crayon-line">
          console.log('cursor:', cursor);
    </div>
    <div id="crayon-5b8f37afae763506229096-8" class="crayon-line crayon-striped-line">
          cursor.continue();
    </div>
    <div id="crayon-5b8f37afae763506229096-9" class="crayon-line">
      }
    </div>
    <div id="crayon-5b8f37afae763506229096-10" class="crayon-line crayon-striped-line">
    };
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    
    
    [![](http://jbcdn2.b0.upaiyun.com/2017/12/5451a2dedd05d9226415141022934c72.png)](http://jbcdn2.b0.upaiyun.com/2017/12/5451a2dedd05d9226415141022934c72.png)
    

    在索引title上使用openKeyCursor()主意,若不传参数,同样也会遍历全体数据,result对象属性如下:

    • key 数据库中那条对象的title属性值
    • primaryKey 数据库中那条对象的alt
    • direction openCursor()方法传入的第3个指标,私下认可值为next
    • source altBIndex对象

    openCursor()办法比较,得到的数码少贰个value属性,是未有主意获得存款和储蓄对象的其他部分

    眼前谈起,我们要基于目录title赢得具备title属性值为寻梦环游记的指标,要利用游标,而又不想遍历全部数据,那时将在动用openCursor()的率先个参数: keyRange

    keyRange是限制游标遍历的多寡范围,通过IDBKeyRange的有个别措施设置该值:

    var singleKeyRange = IDBKeyRange.only("寻梦环游记"), list = []; var index = db .transaction('movies') .objectStore('movies').index('title'); index.openCursor(singleKeyRange).onsuccess = function(event) { var cursor = event.target.result; if (cursor) { console.log('cursor.value:', cursor.value); list.push(cursor.value); cursor.continue(); } else { console.log('list:', list); } };

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    var singleKeyRange = IDBKeyRange.only("寻梦环游记"), list = [];
    var index = db
    .transaction('movies')
    .objectStore('movies').index('title');
    index.openCursor(singleKeyRange).onsuccess = function(event) {
    var cursor = event.target.result;
    if (cursor) {
    console.log('cursor.value:', cursor.value);
    list.push(cursor.value);
    cursor.continue();
    } else {
        console.log('list:', list);
    }
    };

    图片 7

    IDBKeyRange别的一些办法:

    // 相配全数在 "Bill" 前面的, 包罗 "Bill" var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill"); // 相配全部在 “Bill” 前边的, 不过无需包涵 "Bill" var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("比尔", true); // 相称全体在'Donna'后边的, 可是不包涵"Donna" var upperBoundOpenKeyRange = IDBKeyRange.upperBound("堂娜", true); // 相称全部在"Bill" 和 "Donna" 之间的, 可是不富含 "Donna" var boundKeyRange = IDBKeyRange.bound("比尔", "Donna", false, true);

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 匹配所有在 "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);

    越来越多请参考 MDN|IDBKeyRange

    游标默许遍历方向是按主键从小到大,一时候大家倒序遍历,此时能够给openCursor()主意传递首个参数: direction: next|nextunique|prev|prevunique

    var singleKeyRange = IDBKeyRange.only("寻梦环游记"), list = []; var index = db .transaction('movies') .objectStore('movies').index('title'); index.openCursor(singleKeyRange, 'prev').onsuccess = function(event) { var cursor = event.target.result; if (cursor) { console.log('cursor.value:', cursor.value); list.push(cursor.value); cursor.continue(); } else { console.log('list:', list); } };

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    var singleKeyRange = IDBKeyRange.only("寻梦环游记"), list = [];
    var index = db
    .transaction('movies')
    .objectStore('movies').index('title');
    index.openCursor(singleKeyRange, 'prev').onsuccess = function(event) {
    var cursor = event.target.result;
    if (cursor) {
    console.log('cursor.value:', cursor.value);
    list.push(cursor.value);
    cursor.continue();
    } else {
        console.log('list:', list);
    }
    };

    传了prev的结果是按倒序遍历的.

    因为 “name” 索引不是独一的,这就有希望存在具备一样 name 的多条记下。 要注意的是这种情况不容许发生在指标存储空间上,因为键必得永恒是独一的。 借让你想要在游标在目录迭代进程中过滤出双重的,你能够传递 nextunique(或prevunique, 假使你正在向后查找)作为方向参数。 当 nextunique 或是 prevunique 被使用时,被再次来到的拾分总是键最小的笔录。

    var singleKeyRange = IDBKeyRange.only("寻梦环游记"), list = []; var index = db .transaction('movies') .objectStore('movies').index('title'); index.openCursor(singleKeyRange, 'prevunique').onsuccess = function(event) { var cursor = event.target.result; if (cursor) { console.log('cursor.value:', cursor.value); list.push(cursor.value); cursor.continue(); } else { console.log('list:', list); } };

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    var singleKeyRange = IDBKeyRange.only("寻梦环游记"), list = [];
    var index = db
    .transaction('movies')
    .objectStore('movies').index('title');
    index.openCursor(singleKeyRange, 'prevunique').onsuccess = function(event) {
    var cursor = event.target.result;
    if (cursor) {
    console.log('cursor.value:', cursor.value);
    list.push(cursor.value);
    cursor.continue();
    } else {
        console.log('list:', list);
    }
    };

    图片 8

    七、关闭和删除数据库

    • 闭馆数据库只要求在数据库对象db上调用close()艺术就可以
    db.close();
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f37afae779476637224-1">
    1
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f37afae779476637224-1" class="crayon-line">
    db.close();
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    
    
    关闭数据库后,`db`对象仍然保存着该数据库的相关信息,只是无法再开启事务(调用开启事务方法会报错,提示数据库连接已断开):
    

    图片 9

    • 剔除数据库则需求使用indexedDB.deleteDatabase(dbName)方法
    JavaScript
    
    window.indexedDB.deleteDatabase(dbName);
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f37afae77e452573671-1">
    1
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f37afae77e452573671-1" class="crayon-line">
    window.indexedDB.deleteDatabase(dbName);
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    

    八、indexedDB的局限性

    以下意况不合乎利用IndexedDB

    • 全世界二种语言混合存款和储蓄。国际化帮忙糟糕。需求团结管理。
    • 和服务器端数据库同步。你得要好写同步代码。
    • 全文字笔迹核准索。

    专心,在偏下情状下,数据库可能被拔除:

    • 客户央浼解除数据。
    • 浏览器处于隐秘情势。最后退出浏览器的时候,数据会被免除。
    • 硬盘等存款和储蓄设备的容积到限。
    • 不得法的
    • 不完整的改造.

    总结

    1. 使用indexedDB.open(dbName, version)开荒一个数据库连接
    2. 使用indexedDB.deleteDatabase(dbName)去除贰个数据库
    3. 在数据库对象db上使用createObjectStore(storeName, config)成立对象存款和储蓄空间
    4. 在目的存款和储蓄空间objectStore上使用createIndex(indexName, keyName, config)创立索引
    5. 对数据库的操作都亟待经过事务完成: var transction = db.transaction([storeName], mode)
    6. 数据库的增加和删除改查均经过objectStore目的完毕,var objectStore = transaction.objectStore(storeName)
    7. 对数据库数据操作有: add()get()delete()put等方法
    8. 查究数据足以选择索引: objectStore.index(indexName)
    9. 遍历和过滤数据足以应用游标: openCursor(keyRange, direction)

    参照链接

    • IndexedDB的基本概念-MDN
    • 使用 IndexedDB-MDN
    • IndexedDB API接口-MDN
    • Indexed Database API 2.0 – w3c

      1 赞 2 收藏 1 评论

    图片 10

    本文由澳门新葡8455最新网站发布于Web前端,转载请注明出处:骨干接纳

    关键词: