核心提示：IndexedDB CURD 操作代码实例代码如下!DOCTYPE htmlhtmlhead titleindexDB demo/title script type=text/ var indexD...
IndexedDB CURD 操作代码实例
代码如下
<!DOCTYPE html>
<html>
<head>
<title>indexDB demo</title>
<script type="text/javascript">
var indexDB = window.indexedDB;
var dbName = "huituIndexDB";
var iDB = null;
function initIndexDB(){
/**
* 创建 或 打开一个数据库，返回 request 对象
* @param args1 数据库名
* @param args2 数据库版本号
*/
var request = indexDB.open(dbName, 1);
/**
* 数据库打开失败回调
*/
request.onerror = function(){
console.log( dbName + ' open is error!');
}
/**
* 数据库打开成功时回调
*/
request.onsuccess = function(){
// result 为本次申请的结果
// 即,当前数据库对象,用来操作和维护数据表
iDB = request.result;
}
/**
* 数据库首次创建版本 或 winodw.indexedDB.open 传递新版本
* (新版本号要比现在高)
* 通常对主键、字段等进行重定义
*/
request.onupgradeneeded = function( event ){
var db = event.target.result;
// 没有这个表，则创建
if(!db.objectStoreNames.contains('user')){
// 创建一个数据存储对象
var objectStore = db.createObjectStore('user', {
keyPath: 'id',
autoIncrement: true
});
// 定义存储对象的数据项(可理解为数据表里的字段)
objectStore.createIndex('id', 'id', {
unique: true
});
objectStore.createIndex('name', 'name');
objectStore.createIndex('time', 'time');
objectStore.createIndex('remark', 'remark');
}
}
}
// 初始化
initIndexDB();
</script>
</head>
<body>
<button onclick="add('user')">添加一条数据</button>
<button onclick="count('user')">统计</button>
<button onclick="findAllKeys('user')">所有数据key</button>
<button onclick="findAll('user')">所有数据</button>
<button onclick="findDataById('user',parseInt(Math.random()*10))">根据 id获取一条数据</button>
<script type="text/javascript">
/**
* 添加
*/
function add(storename){
// 开启事务&打开存储对象
var objectStore = iDB.transaction([storename], 'readwrite').objectStore(storename);
// 添加到数据对象中
objectStore.add({
name: "jerry"+parseInt(Math.random()*10),
time: new Date().getTime(),
remark: 'indexDb hello world'
});
}
/**
* 统计
*/
function count(storename){
// 开启事务&打开存储对象
var objectStore = iDB.transaction([storename], 'readwrite').objectStore(storename);
var reque = objectStore.count();//数据库访问方法
reque.onsuccess = function(event){
var count = event.target.result;
console.log(count);
}
}
/**
* 显示用户列表
*/
function findAllKeys(storename){
// 开启事务&打开存储对象
var objectStore = iDB.transaction([storename], 'readwrite').objectStore(storename);
// 获取所有 key
var request = objectStore.getAllKeys();
request.onsuccess = function(event){
var keys = event.currentTarget.result;
console.log(keys);
}
}
/**
* 根据 id 查一条数据
*/
function findDataById(storename, key){
// 开启事务&打开存储对象
var objectStore = iDB.transaction([storename],'readwrite').objectStore(storename);
var request = objectStore.get(key);
request.onerror = function(){
console.error('getDataByKey error');
};
request.onsuccess = function(e){
var result = e.target.result;
console.log('查找数据成功')
console.log(result);
};
}
/**
* 根据 id 更新一条数据
*/
function update(storename, id, data) {
var objectStore = iDB.transaction([storename],'readwrite').objectStore(storename);
// 获取存储的对应键的存储对象
var req = objectStore.get(id);
// 获取成功后替换当前数据
req.onsuccess = function(event) {
// 当前数据
var myRecord = req.result;
// 遍历替换
for (var key in data) {
if (typeof myRecord[key] != 'undefined') {
myRecord[key] = data[key];
}
}
// 更新数据库存储数据
objectStore.put(myRecord);
};
}
/**
* 根据 id 删除一条记录
*/
function deleteById(storename, id){
// 开启事务&打开存储对象
var objectStore = iDB.transaction([storename],'readwrite').objectStore(storename);
return objectStore.delete(id);
}
/**
* 获取所有数据
*/
function findAll(storename){
// 开启事务&打开存储对象
var objectStore = iDB.transaction([storename]).objectStore(storename);
objectStore.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
// cursor.value就是数据对象
console.log(cursor.value);
// 游标没有遍历完，继续
cursor.continue();
} else {
// 如果全部遍历完毕...
console.log('全部遍历完毕');
}
}
}
/**
* 查找一个范围内的数据
* @param storename 表名
* @param start 开始 id
* @param end 结束 id
* @param b1 开始 true 不包涵开始位置
* @param b2 结束 true 不包涵结束位置
*/
function findRange(storename, start, end, b1, b2){
// 确定打开的游标的主键范围
var keyRangeValue = IDBKeyRange.bound(start, end, b1, b2);
// 开启事务&打开存储对象
var objectStore = iDB.transaction([storename]).objectStore(storename);
objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
var cursor = event.target.result;
if(cursor){
console.log(cursor.value);
// 游标没有遍历完，继续
cursor.continue();
}else{
console.log('ending');
}
}
}
/**
* 清空表数据
*/
function cleanData(storename){
// 开启事务&打开存储对象
var objectStore = iDB.transaction([storename],'readwrite').objectStore(storename);
objectStore.clear();
}
</script>
</body>
</html>
