IndexedDB浏览器数据库
<script>
// 数据库数据建立过程
// 1.新建数据库
var db;
// 删除数据库信息
// window.indexedDB.deleteDatabase('project');
如图删除数据库project：
// 打开数据库
var DBOpenRequest = window.indexedDB.open('project', 1);
//如果没有当前数据库会自动创建，版本号如果改变会对数据库自动数据库升级；
// 表示数据库打开成功：
DBOpenRequest.onsuccess = function(event) {
// 存储数据结果
db = DBOpenRequest.result;
//成功后才可以对数据库进行操作，不然会报错；
// add(); //新增数据
// read(); //读取数据
// update(); //更新数据
// remove(); //删除数据
// readAll(); //遍历数据
nameSearch(); //使用索引搜索
console.log('存储数据结果1');
};
// 表示数据库打开失败：
DBOpenRequest.onerror = function (event) {
console.log('数据库打开报错');
};
// 下面事情执行于：数据库首次创建版本，或者window.indexedDB.open传递的新版本（版本数值要比现在的高）
DBOpenRequest.onupgradeneeded = function(event) {
// 通常对主键，字段等进行重定义，具体参见demo
var db = event.target.result;
var objectStore;
//判断是否有这个数据库，没有就创建；
if (!db.objectStoreNames.contains('project')) {
// 创建一个数据库存储对象
objectStore = db.createObjectStore('project', {
keyPath: 'id',
autoIncrement: true
});
// 定义存储对象的数据项
objectStore.createIndex('id', 'id', {
unique: true
});
objectStore.createIndex('name', 'name',);
objectStore.createIndex('begin', 'begin');
objectStore.createIndex('end', 'end');
// person字段建立了索引,作为唯一标识{unique: false };
objectStore.createIndex('person', 'person',{unique: false });
objectStore.createIndex('remark', 'remark');
console.log('数据库首次创建版本');
}
};
如图所示：
// 2.新增数据
var newItem = {
"name": "第一个项目",
"begin": "2017-07-16",
"end": "2057-07-16",
"person": "Annie1",
"remark": "测试测试"
};
function add(){
// 新建一个事务
var transaction = db.transaction(['project'], "readwrite");
// 打开存储对象
var objectStore = transaction.objectStore('project');
// 添加到数据对象中
objectStore.add(newItem);
}
如图所示：
// 2.读取数据
function read() {
var transaction = db.transaction(['project']);
var objectStore = transaction.objectStore('project');
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('begin: ' + request.result.begin);
console.log('person: ' + request.result.person);
} else {
console.log('未获得数据记录');
}
};
}
如图：
// 3.遍历数据
function readAll() {
var objectStore = db.transaction('project').objectStore('project');
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('begin: ' + cursor.value.begin);
console.log('person: ' + cursor.value.person);
cursor.continue();
} else {
console.log('没有更多数据了！');
}
};
}
如图：
//4.更新数据
function update() {
var request = db.transaction(['project'], 'readwrite')
.objectStore('project')
.put({id: 2,
"name": "32个项目",
"begin": "2018-09-16",
"end": "2028-09-16",
"person": "AnNie",
"remark": "测试测试"
});
request.onsuccess = function (event) {
console.log('数据更新成功');
};
request.onerror = function (event) {
console.log('数据更新失败');
}
}
如图：
//5.删除数据
function remove() {
var request = db.transaction(['project'], 'readwrite')
.objectStore('project')
.delete(1);
request.onsuccess = function (event) {
console.log('数据删除成功');
};
}
如图：
//6.使用索引
function nameSearch() {
var transaction = db.transaction(['project'], 'readonly');
var store = transaction.objectStore('project');
var index = store.index('person');
var request = index.get('Annie2');
request.onsuccess = function (e) {
var result = e.target.result;
if (result) {
console.log(result);
console.log('name: ' + result.name);
console.log('begin: ' + result.begin);
console.log('person: ' + result.person);
} else {
// ...
}
}
}
如图：
console.log('js代码结尾end...');
</script>
报错：
没有在onsuccess后执行就会报错；
DBOpenRequest.onsuccess = function(event) {
// 存储数据结果
db = DBOpenRequest.result;
// 新建一个事务
var transaction = db.transaction(['project'], "readwrite");
// 打开存储对象
var objectStore = transaction.objectStore('project');
// 添加到数据对象中
objectStore.add(newItem);
console.log('存储数据结果1');
};
//成功函数后才能调用db.transaction，不然会报错undefined；
第一次创建数据库打印代码执行的结果：
第二次刷新执行的结果：
https://gitee.com/sunshine-annie/codes/7i09xbljthd5euzm1qv2c52 代码地址
来源：https://www.cnblogs.com/sunshine-annie/p/10160384.html