indexedDB入门
概述
IndexedDB 是一个事务型数据库系统,类似于基于 SQL 的 RDBMS。 然而不同的是它使用固定列表,IndexedDB 是一个基于 JavaScript 的面向对象的数据库。现有的浏览器数据储存方案,都不适合储存大量数据:Cookie 的大小不超过 4KB,且每次请求都会发送回服务器 LocalStorage 在 2.5MB 到 10MB 之间(各家浏览器不同),而且不提供搜索功能,不能建立自定义的索引。所以,需要一种新的解决方案,这就是 IndexedDB 诞生的背景
简单来说,IndexedDB 就是浏览器提供的本地数据库。
IndexedDB 具有以下特点
- 键值对储存
- 异步操作(避免锁死浏览器)
- 支持事务
- 同源限制(协议+域名+端口)
- 存储空间大
- 支持二进制存储(ArrayBuffer 对象和 Blob 对象,可存储文件数据)
基本概念
对比关系数据库 MySql 可以得到以下关系
- 数据库:IDBDatabase
- 表格:对象仓库(IDBObjectStore)
- 行数据:对象仓库存储的一条数据
- 索引:IDBindex,加速数据的检索(在对象仓库里面可为不同的键创建)
- 事务:IDBTransaction
- 操作请求:IDBRequest
- IDBCursor:遍历对象存储空间和索引
- IDBKeyRange:定义键的范围数据
基本操作
兼容性注意点
// 全局变量兼容性问题 window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction; window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange; if (!window.indexedDB) { window.alert( "Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available." ); }
数据库操作
打开/新建数据库
var databaseName = "MyTestDatabase"; var databaseVersion = 1; // 打开数据库 var request = window.indexedDB.open(databaseName, databaseVersion); request.onsuccess = function(event) { console.log("open success"); }; request.onerror = function(event) { console.log("open fail"); }; request.onupgradeneeded = function(event) {};
window.indexedDB.open
函数打开对应的数据库,如果没有该数据库就会新建。
新建数据库
或者数据库版本
大于当前版本会触发onupgradeneeded
事件
数据库为什么会有版本?因为数据库的数据解构可能会发生改变的
,所以一般修改数据解构的操作在onupgradeneeded
里面书写
删除数据库
window.indexedDB.deleteDatabase(databaseName);
对象仓库操作(表格操作)
创建和修改表格是修改数据库的数据解构
,所以我把他们写在onupgradeneeded
事件里
创建表格
request.onupgradeneeded = function(event) { console.log("onupgradeneeded"); db = event.target.result; // 创建仓库对象(创建表格) // 这里我将主键设置为id var objectStore = db.createObjectStore(objectStoreName, { keyPath: "id", autoIncrement: true }); };
删除表格
request.onupgradeneeded = function(event) { console.log("onupgradeneeded"); db = event.target.result; // 删除仓库对象(删除表格) db.deleteObjectStore(objectStoreName); };
数据操作(行数据操作)
新增数据(增)
var databaseName = "MyTestDatabase"; var databaseVersion = 1; var db; var objectStoreName = "objectStore1"; var storeDatas = [ { id: "1", name: "张三", age: 18 }, { id: "2", name: "李四", age: 19 } ]; var request = window.indexedDB.open(databaseName, databaseVersion); request.onsuccess = function(event) { console.log("open success"); db = event.target.result; // 将数据保存到新建的对象仓库 var objectStore = db .transaction([objectStoreName], "readwrite") .objectStore(objectStoreName); storeDatas.forEach(function(dataItem) { // 添加一条数据 objectStore.add(dataItem); }); };
删除数据(删)
var databaseName = "MyTestDatabase"; var databaseVersion = 1; var db; var objectStoreName = "objectStore1"; var storeDatas = [ { id: "1", name: "张三", age: 18 }, { id: "2", name: "李四", age: 19 } ]; var request = window.indexedDB.open(databaseName, databaseVersion); request.onsuccess = function(event) { console.log("open success"); db = event.target.result; console.log("删除数据"); var req = db .transaction([objectStoreName], "readwrite") .objectStore(objectStoreName) .delete("2"); // 这里的“2”指定的是主键的键值 req.onsuccess = function() { console.log("删除成功"); }; req.onerror = function() { console.log("删除失败"); }; };
修改数据(改)
console.log("更新数据"); var req = db .transaction([objectStoreName], "readwrite") .objectStore(objectStoreName) .put({ id: "2", name: "王五", age: 17 }); // 将整条数据给替换 req.onsuccess = function() { console.log("更新成功"); }; req.onerror = function() { console.log("更新失败"); };
获取数据(查)
console.log("读取数据"); var req = db .transaction([objectStoreName], "readonly") .objectStore(objectStoreName) .get("1"); // 这里的“1”也是主键的键值 req.onsuccess = function() { console.log("获取成功"); console.log(req.result); }; req.onerror = function() { console.log("获取失败"); };
通过指针对象遍历表格数据
console.log("遍历数据"); var objectStore = db .transaction([objectStoreName], "readonly") .objectStore(objectStoreName); var count = 0; objectStore.openCursor().onsuccess = function(event) { var cursor = event.target.result; if (cursor) { console.log(`第${++count}条数据为`); console.log(cursor.value); cursor.continue(); // 将指针移动下一个位置 } else { console.log("没有更多数据"); } };
小结
indexedDB的API还是非常多的,这里只是简单介绍了最常用的几个操作(个人认为^_^)。
参考文档
相关推荐
PkJY 2020-07-08
饮马天涯 2020-07-05
huacuilaifa 2020-05-12
末点 2019-12-11
csdnInfo 2015-02-25
BlackWhite 2019-07-01
YangSunshine 2019-07-01
csdnInfo 2019-06-29
yunxian 2019-06-29
yongyoumengxiang 2019-06-28
Dr凉 2019-06-28
zhaojp0 2019-06-27
拼命工作好好玩 2019-06-27
BlackWhite 2015-02-25
wenhuadream 2015-01-25
PkJY 2015-01-03
bluetears 2014-12-12