参考:http://www.ruanyifeng.com/blog/2018/07/indexeddb.html

  cookie localStorage IndexedDB
大小 不超过4KB 2.5MB-10MB 存储大量数据(不少于250MB)
区别 每次请求都会发送回服务器 不提供搜索功能,不能建立自定义的索引 提供查找接口,还能建立索引
    同步 异步

特点:

1)IndexedDB 不属于关系型数据库(不支持 SQL 查询语句)

2)键值对储存 所有类型的数据都可以直接存入,包括 JavaScript 对象。

3)异步 防止大量数据的读写,拖慢网页的表现。

4)支持事务(transaction) 这意味着一系列操作步骤之中,只要有一步失败,整个事务就都取消,数据库回滚到事务发生之前的状态,不存在只改写一部分数据的情况。

5)同源限制 IndexedDB 受到同源限制,每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库,而不能访问跨域的数据库。

6)支持二进制储存。 IndexedDB 不仅可以储存字符串,还可以储存二进制数据(ArrayBuffer 对象和 Blob 对象)

一、API(indexDB各种对象接口)

数据库:IDBDatabase 对象
对象仓库:IDBObjectStore 对象
索引: IDBIndex 对象
事务: IDBTransaction 对象
操作请求:IDBRequest 对象
指针: IDBCursor 对象
主键集合:IDBKeyRange 对象

1)对象仓库

每个数据库包含若干个对象仓库(object store)类似于关系型数据库中的table.

2)数据记录

数据仓库中保存的是数据记录,类似于关系型数据库中的,但只有主键和数据体两部分。(主键用来建立默认索引,必须不同;主键可以是数据纪录中的一个属性,也可以是一个递增的整数编号)

3)索引

为了加速数据的检索,可以在对象仓库中,为不同的属性建立索引。

4)事务

数据记录的读写和删改,都要通过事务完成。事务对象提供errorabortcomplete三个事件,用来监听操作结果。

二、操作

1. 打开数据库

  var request = window.indexedDB.open(databaseName, version);

这个方法接受两个参数,第一个参数是字符串,表示数据库的名字。如果指定的数据库不存在,就会新建数据库。

第二个参数是整数,表示数据库的版本。如果省略,打开已有数据库时,默认为当前版本;新建数据库时,默认为1

indexedDB.open()方法返回一个 IDBRequest 对象。这个对象通过三种事件errorsuccessupgradeneeded,处理打开数据库的操作结果。

onsuccess

var db;
request.onsuccess = function (event) {
db = request.result;
console.log('数据库打开成功');
};

onupgradeneeded:如果指定的版本号,大于数据库的实际版本号,就会发生数据库升级事件

var db;

request.onupgradeneeded = function (event) {
db = event.target.result;
}

2. 新建数据库

新建数据库与打开数据库是同一个操作。如果指定的数据库不存在,就会新建。不同之处在于,后续的操作主要在upgradeneeded事件的监听函数里面完成,因为这时版本从无到有,所以会触发这个事件。

request.onupgradeneeded = function (event) {
db = event.target.result;
var objectStore;
if (!db.objectStoreNames.contains('person')) {
objectStore = db.createObjectStore('person', { keyPath: 'id' });
}
}
// 新增一张叫做person的表格,主键是id
  • 主键(key)是默认建立索引的属性。
  • 主键也可以指定为下一层对象的属性,比如{ foo: { bar: 'baz' } }foo.bar也可以指定为主键。
  • 如果数据记录里面没有合适作为主键的属性,那么可以让 IndexedDB 自动生成主键。
var objectStore = db.createObjectStore(
'person',
{ autoIncrement: true }
);

3. 新建索引

request.onupgradeneeded = function(event) {
db = event.target.result;
var objectStore = db.createObjectStore('person', { keyPath: 'id' });
objectStore.createIndex('name', 'name', { unique: false });
objectStore.createIndex('email', 'email', { unique: true }); // 索引名称、索引所在的属性、配置对象
}
    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 {
// ...
}
}

4.1  新建数据

新增数据指的是向对象仓库写入数据记录。这需要通过事务完成。

    function add() {
var request = db.transaction(['person'], 'readwrite') //指定表格名称,操作模式
.objectStore('person')
.add({ id: 1, name: '张三', age: 24, email: 'zhangsan@example.com' }); request.onsuccess = function (event) {
console.log('数据写入成功');
}; request.onerror = function (event) {
console.log('数据写入失败');
}
} add();

新建事务以后,通过IDBTransaction.objectStore(name)方法拿到 IDBObjectStore 对象,再通过表格对象的add()方法,向表格写入一条记录。

4.2 读取数据  objectStore.get()方法用于读取数据,参数是主键的值。

    function read() {
var transaction = db.transaction(['person']);
var objectStore = transaction.objectStore('person');
var request = objectStore.get(1); request.onerror = function(event) {
console.log('事务失败');
}; request.onsuccess = function( event) {
if (request.result) {
console.log('Name: ' + request.result.name);
console.log('Age: ' + request.result.age);
console.log('Email: ' + request.result.email);
} else {
console.log('未获得数据记录');
}
};
} read();

4.3 遍历数据

    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();

4.4. 更新数据

function updata () {
var request = db.transaction(['person'], 'readwrite')
.objectStore('person')
.put({id:1, name:'lixing', age:25 email: 'lixing@sina.com'}); request.onsuccess = function (event) {
console.log('数据更新成功');
}; request.onerror = function (event) {
console.log('数据更新失败');
}
} update();

4.5 删除数据

function remove() {
var request = db.transaction(['person'], 'readwrite')
.objectStore('person')
.delete(1); request.onsuccess = function (event) {
console.log('数据删除成功');
};
} remove()

IndexDB的更多相关文章

  1. HTML5:离线存储(缓存机制)-IndexDB

    https://www.w3.org/TR/IndexedDB/ .. <!DOCTYPE html> <html> <head> <meta charset ...

  2. html5中的indexDB

    1.关系型数据库和非关系型数据库 一致性: 事务完成时,必须让所有的数据具有一致的状态,例如要写入100个数据,前99个成功了,结果第100个不合法,此时事务会回滚到最初状态.这样保证事务结束和开始时 ...

  3. html5 indexDB的使用

    angular.module('indexdb', []) .factory('indexDbJs', [function() { const CurDBVersion = 10000; window ...

  4. HTML5项目笔记10:使用HTML5 IndexDB设计离线数据库

    之前的文章(http://www.cnblogs.com/wzh2010/archive/2012/05/22/2514017.html)里面描述了HTML5 离线数据存储的Web SQL,一个基于S ...

  5. indexDB的使用和异步图片blob文件保存

    //调整webkit兼容性 var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || w ...

  6. 使用ES6 Class封装的IndexDB 操作类,并实现模糊搜索

     封装如下: indexDBOperate.js export class IndexDBOperate { db = null // 数据库实例 databaseName = null // 数据库 ...

  7. JS 客户端(浏览器)存储数据之 localStorage、sessionStorage和indexDB

    基本概念 1.localStorage和sessionStorage是HTML5 Web存储的提供的两种存储方式,在IE7以上以及大多数浏览器都是支持的 2.localStorage和sessionS ...

  8. indexDB的概念

    IndexDB利用数据键(key)访问,通过索引功能搜索数据,适用于大量的结构化数据,如日历,通讯簿或者记事本. 1. 以key/value成对保存数据 IndexDB和WebStorage都是以数据 ...

  9. indexdb开cai发keng实zhi践lu

    一直在维护一个用html2canvas截图转base64保存的项目,先不说html2canvas不同版本的不同坑的问题,就说转出来的这个base64字符长度实在太大了,尤其是遇到设计出图高度达到3千多 ...

  10. indexDB出坑指南

    对于入了前端坑的同学,indexDB绝对是需要深入学习的. 本文针对indexDB的难点问题(事务和数据库升级)做了详细的讲解,而对于indexDB的特点和使用方法只简要的介绍了一下.如果你有一些使用 ...

随机推荐

  1. 如何让ThreadPoolExecutor更早地创建非核心线程

    最近在项目中遇到一个需要用线程池来处理任务的需求,于是我用ThreadPoolExecutor来实现,但是在实现过程中我发现提交大量任务时它的处理逻辑是这样的(提交任务还有一个submit方法内部也调 ...

  2. golang/beego 微信模版消息

    // GO的微信SDK我用的是这个:https://github.com/silenceper/wechat // 发送模版消息 // UserNickName,UserMobile是发起预约的人的昵 ...

  3. 存储-raid

  4. [Qt] 通过socket将另一个程序的某个窗口调到最前端

    @ // THIS IS A HACK: // from QT documentation: // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  5. python django mysql配置

    1    django默认支持sqlite,mysql, oracle,postgresql数据库.  <1> sqlite django默认使用sqlite的数据库,默认自带sqlite ...

  6. 《C Primer Plus(第6版)中文版》一1.12 复习题

    本节书摘来自异步社区<C Primer Plus(第6版)中文版>一书中的第1章,第1.12节,作者 傅道坤,更多章节内容可以访问云栖社区"异步社区"公众号查看. 1. ...

  7. 前端存储 (5) - service worker 离线存储

    service worker 离线存储 简介: 一般的网站 在我们无法访问的 时候 一般 回出现 如下 该网页无法访问 service worker 构建的网站不会出现这个错误,因为所有的 请求都是先 ...

  8. Ubuntu Install Chinese Input Method

    为了提高在Linux系统使用中文输入的体验,安装搜狗拼音输入法. 确保键盘输入系统选中fcitx. 搜狗拼音输入法基于fcitx(Free Chinese Input Toy for X)框架,所以要 ...

  9. Leetcode2 两数相加 Python

    给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表示它们的和 ...

  10. Codeforces 1291 Round #616 (Div. 2) B

    B. Array Sharpening time limit per test1 second memory limit per test256 megabytes inputstandard inp ...