1.indexedDB數據庫時一種事務類型數據庫
2.是NoSQL數據庫
3.使用JS對象存儲數據
創建數據庫
1.indexedDB.open創建數據庫
2.open方法返回一個IDBRequest對象
<script>
var db = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
var request, result, version = 2,
dbName = 'testDB',
osName = 'objectStore';
function createDB() {
request = db.open(dbName, version)
//請求有三種狀態，如下：
request.onsuccess = function() { // 打開數據庫成功
db = request.result;
console.log('open success');
}
request.onerror = function(e) { // 打開數據庫失敗
console.log(e.currentTarget.errormessage)
}
request.onupgradeneeded = function(e) { //請求數據庫版本變化時
db = request.result;
console.log('upgradeneeded ');
}
}
createDB()
<script>
如何創建“表”（ObjectStore）
1.indexedDB.createObjectStore創建ObjectStore
2.createObjectStore 方法可以設置主鍵類型
<script>
var db = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
var request, result, version = 2,
dbName = 'testDB',
osName = 'os1';
function createDB() {
request = db.open(dbName, version)
//請求有三種狀態，如下：
request.onsuccess = function() { // 打開數據庫成功
db = request.result;
console.log('open success');
}
request.onerror = function(e) { // 打開數據庫失敗
console.log(e.currentTarget.errormessage)
}
request.onupgradeneeded = function(e) { //請求數據庫版本變化時
db = request.result;
if (!db.objectStoreNames.contains(osName)) {
db.createObjectStore(osName, {autoIncrement: true}) // 創建的表的主建是自增型的
}
}
}
createDB()
<script>
事務IDBTransaction
調用indexedDB.transaction 方法會返回一個IDBTransaction對象，它含有一個objectStore方法可以讓用戶通過指定模式獲取objectStore
indexed->transaction->objectStore
var transaction, store;
transaction = db.transaction(osName, 'readwrite'); //打開一個事務，讀寫模式
store = transaction.objectStore(osName) ///獲取osName指定的 object store
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Learn IndexedDB</title>
</head>
<body>
<script>
var db = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
var request, result, version = 2,
dbName = 'testDB',
osName = 'os1';
function createDB() {
request = db.open(dbName, version)
//請求有三種狀態，如下：
request.onsuccess = function() { // 打開數據庫成功
db = request.result;
console.log('open success');
}
//如何創建索引
//IDBObjectStore.createIndex
// -indexName:索引名稱
// -keyPath:索引字段，可以為空或者數組（type array）
// -optionParameters:索引配置參數
request.onupgradeneeded = function(e) { //請求數據庫版本變化時
var store = null;
db = e.target.result;
console.log('upgradeneeded');
if (!db.objectStoreNames.contains(osName)) {
// db.createObjectStore(osName, {autoIncrement: true}) // 創建的表的主建是自增型的
store = db.createObjectStore(osName, { keyPath: 'id' }) // 創建的表以字段為主建
store.createIndex('idIndex', 'id', { unique: true }); //創建索引字段id唯一
store.createIndex('categoryIndex', 'category', { multiEntry: true }); //創建索引字段為數組
store.createIndex('hpIndex', 'hp', { unique: false });
}
optionParameters:可選值
1.unique 表示keyPath 字段的數據是否唯一
2.multiEntry 表示是否為keyPath字段的每一項建立一條索引數據
索引的相關方法
1.查詢數據--IDBIndex.get
2.查詢所有數據--IDBIndex.getAll
3.打開游標--IDBIndex.openCursor
如何創建游標
IDBObjectStore/IDBIndex.openCursor
-接受可選參數range和direction
-返回一個IDBRequet對象
-該IDBRequet對象的結果是一個IDBCursor對象
function useCursorGetData() {
var transaction = db.transaction(osName, 'readwrite'), //打開一個事務，讀寫模式
store = transaction.objectStore(osName),
// request=store.openCursor(); //創建游標
// request=store.openCursor(IDBKeyRange.only('002')); //指定游標KeyRange，only一個
request = store.openCursor(null, 'prev');
request.onsuccess = function() {
var cursor = request.result;
if (cursor) {
console.log(cursor.value);
cursor.continue();
}
}
}
request.onerror = function(e) { // 打開數據庫失敗
console.log(e.currentTarget.errormessage)
}
request.onupgradeneeded = function(e) { //請求數據庫版本變化時
var store = null;
db = e.target.result;
console.log('upgradeneeded');
if (!db.objectStoreNames.contains(osName)) {
// db.createObjectStore(osName, {autoIncrement: true}) // 創建的表的主建是自增型的
store = db.createObjectStore(osName, { keyPath: 'id' }) // 創建的表以字段為主建
store.createIndex('idIndex', 'id', { unique: true }); //創建索引字段id唯一
store.createIndex('categoryIndex', 'category', { multiEntry: true }); //創建索引字段為數組
store.createIndex('hpIndex', 'hp', { unique: false });
}
}
}
createDB()
// save data
var data = [{
name: '史萊姆',
id: '001',
hp: 3,
category: ['怪物', '容易逃跑']
}, {
name: '小蝙蝠',
id: '002',
hp: 5,
category: ['怪物', '飛行']
}, {
name: '小惡魔',
id: '003',
hp: 9,
category: ['怪物', '惡魔']
}]
// use IDBObjectStore.add to save data
console.log(db);
//IDBRequest對象
//1.使用IDBRequest.onsuccess 綁定查詢完成事件
//2.使用IDBRequest.result 獲取查詢結果
//3.使用IDBRequest.onerror 綁定查詢失敗事件
function getData(id) {
var transaction = db.transaction(osName, 'readwrite'), //打開一個事務，讀寫模式
store = transaction.objectStore(osName);
var request = store.get(id);
request.onsuccess = function() {
console.log(request.result);
}
}
request.onerror = function(e) { // 打開數據庫失敗
console.log(e.currentTarget.errormessage)
}
//key的兩種類型
//1.設置自增主鍵- {autoIncrement:true}
//2.取數據中字段作為主鍵- {keyPath:字段名} 例如{keyPath:id}
// db.createObjectStore(osName, {autoIncrement: true}) // 創建的表的主建是自增型的
store = db.createObjectStore(osName, { keyPath: 'id' }) // 創建的表以字段為主建
//關於“表”的增刪查改
//1.增加數據-IDBObjectStore.add
//2.獲取數據-IDBObjectStore.get
//3.獲取所有數據-IDBObjectStore.addAll
//4.修改數據-IDBObjectStore.put
//5.刪除數據-IDBObjectStore.delete
//6.清除所有數據-IDBObjectStore.clear
function addData() {
if (!db) { alert("db"); }
var transaction, store;
transaction = db.transaction(osName, 'readwrite'); //打開一個事務，讀寫模式
store = transaction.objectStore(osName) ///獲取osName指定的 object store
data.map(function(o) {
store.add(o)
// request = store.add(o) //增加數據
// if (data.length - 1 === i) {
// request.onsuccess = function () {
// console.log('alreay add all data to db')
// showCurrentData()
// }
// }
})
}
function getData(id) {
var transaction = db.transaction(osName, 'readwrite'), //打開一個事務，讀寫模式
store = transaction.objectStore(osName);
var request = store.get(id);
request.onsuccess = function() {
console.log(request.result);
}
}
function getAllData() {
var transaction = db.transaction(osName, 'readwrite'), //打開一個事務，讀寫模式
store = transaction.objectStore(osName);
var request = store.getAll();
request.onsuccess = function() {
console.log(request.result);
}
}
function updateData(id) {
var transaction = db.transaction(osName, 'readwrite'), //打開一個事務，讀寫模式
store = transaction.objectStore(osName);
var request = store.get(id);
request.onsuccess = function() {
request = store.put({ //更新即可以更新也可以添加，取決於關鍵字是否有重復
name: '小花貓',
id: id,
hp: 9
});
}
}
function deleteData(id) {
var transaction = db.transaction(osName, 'readwrite'), //打開一個事務，讀寫模式
store = transaction.objectStore(osName);
var request = store.delete(id);
request.onsuccess = function() {
console.log('delete success');
}
}
function clear() {
var transaction = db.transaction(osName, 'readwrite'), //打開一個事務，讀寫模式
store = transaction.objectStore(osName);
var request = store.clear();
request.onsuccess = function() {
console.log('clear success');
}
}
IDBKeyRange對象
1.upperBound指定游標范圍的上限
2.lowerBound指定游標范圍的下限
3.bound指定游標范圍的區間
4.only指定游標的值
function useCursorGetData() {
var transaction = db.transaction(osName, 'readwrite'), //打開一個事務，讀寫模式
store = transaction.objectStore(osName),
// request=store.openCursor(); //創建游標
// request=store.openCursor(IDBKeyRange.only('002')); //指定游標KeyRange，only一個
request = store.openCursor(null, 'prev');
request.onsuccess = function() {
var cursor = request.result;
if (cursor) {
console.log(cursor.value);
cursor.continue();
}
}
}
Direction參數
direction參數的值
-next ：順序查詢 -nextunique：順序唯一查詢
-prev：逆序查詢 -prevunique：逆序唯一查詢
function useCursorGetData() {
var transaction = db.transaction(osName, 'readwrite'), //打開一個事務，讀寫模式
store = transaction.objectStore(osName),
// request=store.openCursor(); //創建游標
// request=store.openCursor(IDBKeyRange.only('002')); //指定游標KeyRange，only一個
request = store.openCursor(null, 'prev');
request.onsuccess = function() {
var cursor = request.result;
if (cursor) {
console.log(cursor.value);
cursor.continue();
}
}
}
索引和游標的結合使用
function useIndexGetData() { // 索引只能查詢數據，並不能操作數據
var transaction = db.transaction(osName, 'readwrite'), //打開一個事務，讀寫模式
store = transaction.objectStore(osName),
// request=store.openCursor(); //創建游標
// request=store.openCursor(IDBKeyRange.only('002')); //指定游標KeyRange，only一個
index = store.index('categoryIndex');
request = index.getAll('飛行');
request.onsuccess = function() {
console.log(request.result);
}
}
function useIndexAndCursorOperateData() { // 索引和游標結合，可以查詢和操作數據
var transaction = db.transaction(osName, 'readwrite'), //打開一個事務，讀寫模式
store = transaction.objectStore(osName),
// request=store.openCursor(); //創建游標
// request=store.openCursor(IDBKeyRange.only('002')); //指定游標KeyRange，only一個
// index=store.index('categoryIndex');
index = store.index('hpIndex');
// request = index.openCursor(IDBKeyRange.upperBound(5)); // 5（包含5）以下
request = index.openCursor(IDBKeyRange.bound(5,10,true,true)); // 范圍（5到10）
request.onsuccess = function() {
var cursor = request.result,value=null;
if (cursor) {
// if(cursor.value.id==='002'){
// cursor.update({ // 更新數據
// name: '小蝙蝠',
// id: '002',
// hp: 10,
// category:['怪物','飛行']
// })
// cursor.delete().onsuccess=function () { // 刪除數據
// console.log('delete');
// }
// }
value = cursor.value;
value.hp += 20;
cursor.update(value);
console.log(cursor.value);
cursor.continue();
}
}
}
</script>
</body>
</html>