IndexDB
参考: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)事务
数据记录的读写和删改,都要通过事务完成。事务对象提供error
、abort
和complete
三个事件,用来监听操作结果。
二、操作
1. 打开数据库
var request = window.indexedDB.open(databaseName, version);
这个方法接受两个参数,第一个参数是字符串,表示数据库的名字。如果指定的数据库不存在,就会新建数据库。
第二个参数是整数,表示数据库的版本。如果省略,打开已有数据库时,默认为当前版本;新建数据库时,默认为1
。
indexedDB.open()
方法返回一个 IDBRequest 对象。这个对象通过三种事件error
、success
、upgradeneeded
,处理打开数据库的操作结果。
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的更多相关文章
- HTML5:离线存储(缓存机制)-IndexDB
https://www.w3.org/TR/IndexedDB/ .. <!DOCTYPE html> <html> <head> <meta charset ...
- html5中的indexDB
1.关系型数据库和非关系型数据库 一致性: 事务完成时,必须让所有的数据具有一致的状态,例如要写入100个数据,前99个成功了,结果第100个不合法,此时事务会回滚到最初状态.这样保证事务结束和开始时 ...
- html5 indexDB的使用
angular.module('indexdb', []) .factory('indexDbJs', [function() { const CurDBVersion = 10000; window ...
- HTML5项目笔记10:使用HTML5 IndexDB设计离线数据库
之前的文章(http://www.cnblogs.com/wzh2010/archive/2012/05/22/2514017.html)里面描述了HTML5 离线数据存储的Web SQL,一个基于S ...
- indexDB的使用和异步图片blob文件保存
//调整webkit兼容性 var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || w ...
- 使用ES6 Class封装的IndexDB 操作类,并实现模糊搜索
封装如下: indexDBOperate.js export class IndexDBOperate { db = null // 数据库实例 databaseName = null // 数据库 ...
- JS 客户端(浏览器)存储数据之 localStorage、sessionStorage和indexDB
基本概念 1.localStorage和sessionStorage是HTML5 Web存储的提供的两种存储方式,在IE7以上以及大多数浏览器都是支持的 2.localStorage和sessionS ...
- indexDB的概念
IndexDB利用数据键(key)访问,通过索引功能搜索数据,适用于大量的结构化数据,如日历,通讯簿或者记事本. 1. 以key/value成对保存数据 IndexDB和WebStorage都是以数据 ...
- indexdb开cai发keng实zhi践lu
一直在维护一个用html2canvas截图转base64保存的项目,先不说html2canvas不同版本的不同坑的问题,就说转出来的这个base64字符长度实在太大了,尤其是遇到设计出图高度达到3千多 ...
- indexDB出坑指南
对于入了前端坑的同学,indexDB绝对是需要深入学习的. 本文针对indexDB的难点问题(事务和数据库升级)做了详细的讲解,而对于indexDB的特点和使用方法只简要的介绍了一下.如果你有一些使用 ...
随机推荐
- 如何让ThreadPoolExecutor更早地创建非核心线程
最近在项目中遇到一个需要用线程池来处理任务的需求,于是我用ThreadPoolExecutor来实现,但是在实现过程中我发现提交大量任务时它的处理逻辑是这样的(提交任务还有一个submit方法内部也调 ...
- golang/beego 微信模版消息
// GO的微信SDK我用的是这个:https://github.com/silenceper/wechat // 发送模版消息 // UserNickName,UserMobile是发起预约的人的昵 ...
- 存储-raid
- [Qt] 通过socket将另一个程序的某个窗口调到最前端
@ // THIS IS A HACK: // from QT documentation: // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- python django mysql配置
1 django默认支持sqlite,mysql, oracle,postgresql数据库. <1> sqlite django默认使用sqlite的数据库,默认自带sqlite ...
- 《C Primer Plus(第6版)中文版》一1.12 复习题
本节书摘来自异步社区<C Primer Plus(第6版)中文版>一书中的第1章,第1.12节,作者 傅道坤,更多章节内容可以访问云栖社区"异步社区"公众号查看. 1. ...
- 前端存储 (5) - service worker 离线存储
service worker 离线存储 简介: 一般的网站 在我们无法访问的 时候 一般 回出现 如下 该网页无法访问 service worker 构建的网站不会出现这个错误,因为所有的 请求都是先 ...
- Ubuntu Install Chinese Input Method
为了提高在Linux系统使用中文输入的体验,安装搜狗拼音输入法. 确保键盘输入系统选中fcitx. 搜狗拼音输入法基于fcitx(Free Chinese Input Toy for X)框架,所以要 ...
- Leetcode2 两数相加 Python
给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表示它们的和 ...
- Codeforces 1291 Round #616 (Div. 2) B
B. Array Sharpening time limit per test1 second memory limit per test256 megabytes inputstandard inp ...