ag旗舰厅官网_ag旗舰厅下载客户端

热门关键词: ag旗舰厅官网,ag旗舰厅下载客户端

前端技术

当前位置:ag旗舰厅官网 > 前端技术 > 着力选取

着力选取

来源:http://www.pedaLyourcycLe.com 作者:ag旗舰厅官网 时间:2019-11-01 17:03

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, VERAV4SION); 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] (此中的keyPath属性值,标记对象的该属性值唯生龙活虎)
  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)
    那八个点子选择的参数形似, 三个参数都是可选的: 第二个参数是约束值得范围,第一个参数是内定游标方向

游标的使用有以下几处:

  • 在对象存款和储蓄空间上选择: 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()方法传入的第四个指标,暗许值为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("Bill", true); // 匹配全部在'堂娜'前边的, 不过不包含"Donna" var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true); // 相称全部在"比尔" 和 "堂娜" 之间的, 可是不包括 "Donna" var boundKeyRange = IDBKeyRange.bound("Bill", "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

本文由ag旗舰厅官网发布于前端技术,转载请注明出处:着力选取

关键词: