IndexedDB的open问题-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

IndexedDB的open问题

2016-03-12 10:49:38 2019 1

附上代码:
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)
  • a123456678
    2019-07-17 19:00:24

    虽然你是按照1、2、3、4、5来顺序调用的,但是,onsuccess和onupgradeneeded是浏览器异步去执行的。所以你看到的是3、4、5、1、2的执行顺序。
    把operaData放到一个回调函数里。等onsuccess的时候在执行这个回调函数。应该就没有问题了。
    你的问题所在就是被onsuccess和onupgradeneeded方法为异步执行的特点给坑了。使用回调函数就可以解决这个问题。

    0 0
相关问答

0

回答

C Link SDK移植到openwrt遇到问题

2022-06-27 17:15:46 54浏览量 回答数 0

1

回答

python的函数os.open(file, flags[, mode])的作用是什么?

2021-11-12 17:09:43 106浏览量 回答数 1

1

回答

open()方法的作用是什么?

2021-11-01 01:19:40 100浏览量 回答数 1

1

回答

xmpp协议,smack包连接不上openfire 400 请求报错 

2020-05-29 17:23:50 547浏览量 回答数 1

1

回答

如何在OpenGL中显示unicode文本?

2020-01-03 19:38:14 405浏览量 回答数 1

1

回答

发布项目IIS下index.html可以访问index.php不能访问改用apache两都不能访问

2018-09-08 09:39:55 1121浏览量 回答数 1

0

回答

使用open api创建用户SDK.InvalidRegionId

2018-05-01 20:57:00 1962浏览量 回答数 0

1

回答

win2008 搭openvpn 不会

2017-10-26 23:09:08 1624浏览量 回答数 1

0

回答

Open API如何接入

2017-10-26 10:59:18 1427浏览量 回答数 0

1

回答

open api中怎么修改表项内容

2016-04-03 17:27:45 1750浏览量 回答数 1
+关注
0
文章
14879
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载