附上代码：
IndexDB.js
var datalist = [
{id:1,name:"程文1",phone:"13237177923",sex:"1",address:"宝石园",home:"驰誉"},
{id:2,name:"程文2",phone:"13237177923",sex:"1",address:"宝石园",home:"驰誉"},
{id:3,name:"程文3",phone:"13237177923",sex:"1",address:"宝石园",home:"驰誉"}
]
/**
* 检测浏览器是否支持indexedDB
*/
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
if(!window.indexedDB)
{
console.log("你的浏览器不支持IndexedDB");
}
/**
* 创建数据库
*/
function openDB(name,version){
var version = version||1;
var request = window.indexedDB.open(name,version);
request.onerror = function(){
console.log("cwDB数据库创建失败或者异常~")
}
request.onsuccess = function(e){
cw_DB.db = e.target.result;
console.log("cwDB数据库连接成功~")
console.log(cw_DB)
}
request.onupgradeneeded = function(e){
console.log("cwDB数据库操作~")
cw_DB.db=e.target.result;
var db = e.target.result;
if(!db.objectStoreNames.contains("list")){
db.createObjectStore('list',{keyPath:"id"});
/*store.createIndex("nameIndex","name",{unique:true})
store.createIndex("phoneindex","phone",{unique:false});
store.createIndex("sexindex","sex",{unique:false});
store.createIndex("addressindex","address",{unique:false});
store.createIndex("homeindex","home",{unique:false});*/
}
}
}
/**
* 数据操作
* @param {Object} db //IndexedDB对象
* @param {String} stroename //stroe名字
* @param {Number} index //下标
* @param {Object} value //值
* @param {String} operation //操作类型
* @param {Object} obj //对象属性
*/
function operaData(parameter){
var transaction = parameter.db.transaction(parameter.stroename,"readwrite");
var stroe = transaction.objectStore(parameter.stroename);
switch(parameter.operation){
case "add":
addData(stroe,parameter.value);
break;
case "get":
getData(stroe,parameter.index)
break;
case "update":
updateData(stroe,parameter.index,parameter.obj,parameter.value);
break;
case "del":
delData(stroe,parameter.index);
break;
}
}
/**
* 添加数据
* @param {Object} stroe //object store
* @param {Object} list //添加的对象
*/
function addData(stroe,list){
if(typeof(list)=="object"){
for (var i =0;i<list.length;i++) {
stroe.add(list[i]);
}
}else{
layer.msg('添加的类型必须为对象~');
}
}
/**
* 读取数据
* @param {Object} stroe //object store
* @param {Number} index //下标
*/
function getData(stroe,index){
var request = stroe.get(index);
request.onsuccess = function(e){
var list = e.target.result;
return list;
console.log(list)
}
}
/**
* 更新数据
* @param {Object} stroe //object store
* @param {Number} index //下标
* @param {Object} obj //对象属性
* @param {Object} value //修改的值
*/
function updateData(stroe,index,obj,value){
var request = stroe.get(index);
request.onsuccess = function(e){
var list = e.target.result;
list[obj] = value;
stroe.put(list);
console.log(list);
}
}
/**
* 删除数据
* @param {Object} stroe //object store
* @param {Object} index //下标
*/
function delData(stroe,index){
stroe.delete(index);
}index.js
var run = {db:"",stroename:"",index:"",value:"",operation:"",obj:""};
var cw_DB ={name:"testDB",version:7,db:null};
openData();
var index = angular.module("index",[]);
index.controller("indexCtrl",function($scope){
console.log(cw_DB)
$scope.data={name:"",phone:"",sex:"",address:"",home:""};
$scope.table_list=opera(cw_DB.db,"list",1,null,"get",null);
console.log($scope.table_list);
$scope.add_data= function(){
$scope.table_list.push($scope.data)
}
/**
* 数据操作
* @param {Object} db //IndexedDB对象
* @param {String} stroename //stroe名字
* @param {Number} index //下标
* @param {Object} value //值
* @param {String} operation //操作类型
* @param {Object} obj //对象属性
*/
function opera(db,stroename,index,value,operation,obj){
run.db = db;
run.index = index;
run.stroename=stroename;
run.operation=operation;
run.obj=obj;
run.value = value;
console.log(cw_DB)
console.log(run)
operaData(run)
}
})
function openData(){
openDB(cw_DB.name,cw_DB.version);
}
这个是先后顺序。
按照常规流程步骤应该是以下步骤输出
可是结果却是……
345最先执行完，然后才执行的12、我在想为什么？？ 是因为我把IndexedDB单独分开到一个js文件用另外一个文件调取会导致开启速度变慢？？
刚刚接触IndexedDB求解。。。
当时刚开始写IndexedDB的开启数据库和增删改查的时候，一个JS里面调用好像没发现什么问题，我现在吧open的方法放到另外一个js作为引用。结果出现了顺序执行不对导致无法运行。
虽然你是按照1、2、3、4、5来顺序调用的，但是，onsuccess和onupgradeneeded是浏览器异步去执行的。所以你看到的是3、4、5、1、2的执行顺序。
把operaData放到一个回调函数里。等onsuccess的时候在执行这个回调函数。应该就没有问题了。
你的问题所在就是被onsuccess和onupgradeneeded方法为异步执行的特点给坑了。使用回调函数就可以解决这个问题。