1. 打开数据库
var request = window.indexedDB.open("study");
request.onerror = function (event) {
console.log("数据库打开报错");
};
2. 升级数据库，若库不存在，就创建一个库
unique设为true,值具有唯一性
request.onupgradeneeded = function (event) {
console.log("数据库升级")
db = event.target.result;
if (!db.objectStoreNames.contains("person")) {
var objectStore = db.createObjectStore("person", { keyPath: "id" });
objectStore.createIndex("name", "name", { unique: false });
objectStore.createIndex("email", "email", { unique: true });
}
};
3. 打开数据库成功，并读取数据库大小
var db;
request.onsuccess = function (event) {
db = request.result;
console.log("数据库打开成功");
let transaction = db.transaction(db.objectStoreNames, "readonly");
let totalSize = 0;
let remaining = db.objectStoreNames.length;
for (let storeName of db.objectStoreNames) {
let store = transaction.objectStore(storeName);
let sizeRequest = store.count();
sizeRequest.onsuccess = function () {
totalSize += sizeRequest.result * 1024;
if (--remaining === 0) {
console.log("indexDB容量大小", totalSize);
}
};
sizeRequest.onerror = function () {};
}
};
4. 新增数据库中的值 add
新增数据data:{ id: 1, name: '李四', age: 35, email: 'lisi@example.com' }
id需要是唯一的，不能相同
/**
* 新增数据
* @param {object} db 数据库实例
* @param {string} storeName 仓库名称
* @param {string} data 数据
*/
function addData(db, storeName, data) {
var request = db
.transaction([storeName], "readwrite") // 事务对象 指定表格名称和操作模式（"只读"或"读写"）
.objectStore(storeName) // 仓库对象
.add(data);
request.onsuccess = function (event) {
console.log("数据写入成功");
};
request.onerror = function (event) {
console.log("数据写入失败");
};
}
5. 更新数据库的值 put
更新data: 若id已经在库中有了，则是更新这条数据，否则就是新增一条数据
function putData(db, storeName, data) {
var request = db
.transaction([storeName], "readwrite") // 事务对象 指定表格名称和操作模式（"只读"或"读写"）
.objectStore(storeName) // 仓库对象
.put(data);
request.onsuccess = function (event) {
console.log("数据写入成功");
};
request.onerror = function (event) {
console.log("数据写入失败");
};
}
6. 获取数据库中的值
key就是创建数据库中的关键字
例如：var objectStore = db.createObjectStore("person", { keyPath: "id" });
此时的key就是id值
function clickReadByKey(key){
var request = db.transaction(["person"], "readwrite").objectStore("person").get(key);
request.onerror = function (event) {
console.log("数据读取失败");
};
request.onsuccess = function (event) {
console.log(request.result);
};
}
7. 获取数据库中所有值
cursor.continue()是获取下一个值。
function clickRead() {
var objectStore = db.transaction("person", "readwrite").objectStore("person");
objectStore.openCursor().onsuccess = function (event) {
var cursor = event.target.result;
// console.log(event);
// console.log(cursor);
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("没有更多数据了！");
}
};
}
8. 通过索引获取到唯一值
创建索引值
objectStore.createIndex("name", "name", { unique: false });
function clickGet(index,indexData) {
var objectStore = db.transaction("person", "readwrite").objectStore("person");
var index = objectStore.index(index);
var request = index.get(indexData);
request.onsuccess = function (event) {
console.log(event);
console.log(request.result);
};
request.onerror = function (event) {
console.log("数据读取失败");
};
}
9. 删除相关的数据
function clickDeleteByKey(key) {
var objectStore = db.transaction("person", "readwrite").objectStore("person");
var request = objectStore.delete(key);
request.onsuccess = function (event) {
console.log("数据删除成功");
};
request.onerror = function (event) {
console.log("数据删除失败");
};
}
10. 删除数据库中所有的数据
var transaction = db.transaction(["person"], "readwrite");
var objectStore = transaction.objectStore("person");
objectStore.clear()
11. 删除相关的数据库
window.indexedDB.deleteDatabase('study');
indexDB和localStorage
键值对存储：indexDB内部采用对象仓库存放数据。所有类型的数据都可以直接存入。在仓库中，数据以键值对的形式进行保存，每一个数据记录都有对应的主键，且主键是独一无二的，不能有重复。异步：indexDB操作时是异步操作，不会导致浏览器卡死，可以同时进行其他操作，localStorage是同步的，若数据量过大，则会影响到网页的性能。支持事务：indexDB支持事务，支持在数据库操作失败后，整个事务取消，数据库会回滚到之前的状态，有利于保证数据的安全与完整性。同源限制：IndexDB受同源限制，每个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能跨域访问。支持二进制储存：IndexDB可以存储json,可以存储字符串，可以存储二进制树。存储空间大：indexDB是数据库，所以一般存储量不少于250MB。
