小明明明明明 2017-07-25 14:41 采纳率: 0%
浏览 643
已结题

indexedDB中的游标continue()函数不能正常执行

 <!DOCTYPE html>
<html>
<head>
<!--
改进的地方:
    模块化
    增加时间、地点
    为每一条留言增加:编辑、删除
    使可以输入表情、图片等
    点击提交留言不会添加“说”
    添加登录注册

-->

<meta charset="utf-8"></meta>
<script>
    var db;
    var arrayKey=[]
    var openRequest;
    var lastCursor;

    var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;

    function init()
    {
        //打开数据库
        openRequest = indexedDB.open("messageIndexDB");
        //只能在onupgradeneeded创建对象存储空间
        openRequest.onupgradeneeded = function(e)
        {
            //console.log("running onupgradeneeded");
            var thisDb = e.target.result;//获取数据库实例
            if(!thisDb.objectStoreNames.contains("messageIndexDB"))
            {
                console.log("I need to create the objectstore");
                /*
                 *创建对象存储空间,第一个参数必须和打开数据库的第一个参数一致
                 *设置键名是id,并且可以自增.
                 *autoIncrement默认是false,keyPath默认null
                 */
                var objectStore = thisDb.createObjectStore("messageIndexDB", { keyPath: "id", autoIncrement:true });
                /*
                 *创建索引
                 *第一个参数是索引名,第二个是作为索引的属性名,第三个设置索引特性
                 */
                objectStore.createIndex("name", "name", { unique: false });
            }
        }

        openRequest.onsuccess = function(e)
        {
            //e.target.result返回一个数据库实例
            db = e.target.result;
            db.onerror = function(event)
            {
              alert("数据库错误: " + event.target.errorCode);
              console.dir(event.target);
            };
            if(db.objectStoreNames.contains("messageIndexDB"))
            {
                console.log("contains messageIndexDB");
                //读写方式开启事务
                var transaction = db.transaction(["messageIndexDB"],"readwrite");
                transaction.oncomplete = function(event)
                {
                    //  console.log("All done!");
                };
                transaction.onerror = function(event)
                {
                    // 错误处理
                    console.dir(event);
                };
                //var content= document.querySelector("#content");

                //得到messageIndexDB的objectStore对象
                var objectStore = transaction.objectStore("messageIndexDB");

                //游标查询
                objectStore.openCursor().onsuccess = function(event)
                {
                    //event.target.result获取存储空间的下一个对象
                    var cursor = event.target.result;
                    var flag=0;//

                    //判断是否存在下一个对象,不存在是curson为null
                    if (cursor)
                    {

                        console.log(cursor.key); //获取键
                        console.dir(cursor.value); //实际对象,一个Object实例
                        var msgList= document.querySelector("#messageList");
                        var msgDiv=document.createElement("div");
                        var msgTxt = document.createTextNode(cursor.value[flag]["name"]+"说:"+cursor.value[flag]["content"]);
                        msgDiv.id=cursor.key;
                        msgDiv.appendChild(msgTxt);
                        msgList.appendChild(msgDiv);
                        arrayKey.push(cursor.key);
                        flag++;
                        lastCursor=cursor.key;//记录当前游标的上一个游标
                        cursor.continue();   //将游标下移一项
                    }
                    else
                    {
                          console.log("Done with cursor");
                    }
                };
                //错误处理
                 objectStore.openCursor().onerror=function(event){
                    console.dir(event);
                };
            }
        };

        openRequest.onerror = function (event) {
            // 对request.error做一些需要的处理!
            console.log("your web may not support IndexedDB,please check.");
        };

        //焦点处理
        document.querySelector("#message").addEventListener("focus",function()
            {
                this.value = "";
            });
        document.querySelector("#name").addEventListener("focus",function()
            {
                this.value = "";
            });

        //添加数据
        document.querySelector("#btn1").addEventListener("click", function()
        {
            var content=document.querySelector("#message").value;
            var name=document.querySelector("#name").value;
            /*var address=document.querySelector("#address").value;*/
            var messageIndexDB=[{"name":name,"content":content}];//这里的nessageIndexDB和数据库的名字的区别是一个是变量,一个是字符串(使用时都是用引号引起来的)

                var transaction = db.transaction(["messageIndexDB"], "readwrite");
                transaction.oncomplete = function(event)
                {
                   // console.log("transaction complete");
                };
                transaction.onerror = function(event)
                {
                    console.dir(event);
                };
                 //得到messageIndexDB的objectStore对象
                var objectStore = transaction.objectStore("messageIndexDB");
                objectStore.add(messageIndexDB);



            objectStore.openCursor().onsuccess = function(event)
            {
                cursor = event.target.result;
                console.log(cursor.key);
                var key;
                if(lastCursor==null)
                {

                    key=cursor.key;
                    lastCursor=key;
                    console.log("这里是lastCursor==null"+key+" "+lastCursor);
                }
                else
                {
                    key=++lastCursor;//全局变量,所以每次点击按钮都是接着上一次的值
                    console.log("这里是lastCursor不是null"+key+" "+lastCursor);
                }
                /*console.log("这里是改造后的");//这样不行,因为cursor.key在每次点击按钮时都会从第一个cursor开始
                key = cursor.key;
                cursor.continue();*/
                var msgList= document.querySelector("#messageList");
                var msgDiv=document.createElement("div");
                msgDiv.id=key;
                var msgTxt = document.createTextNode(name+"说:"+content);
                msgDiv.appendChild(msgTxt);
                msgList.appendChild(msgDiv);
                arrayKey.push(key);
                console.log("success add new record!key:"+key);
                console.dir(messageIndexDB);
               // cursor.continue();
            }
        });
        //删除
        document.querySelector("#delete").addEventListener("click", function()
        {
            if(arrayKey.length==0){
                console.log("no data to delete!");
            }
            else
            {
                var transaction = db.transaction(["messageIndexDB"], "readwrite");
                transaction.oncomplete = function(event)
                {
                       //    console.log("transaction complete!");
                };

                transaction.onerror = function(event)
                {
                  console.dir(event);
                };
                 //得到messageIndexDB的objectStore对象
                var objectStore = transaction.objectStore("messageIndexDB");
                var removeKey=arrayKey.shift();
                //获取key
                var getRequest=objectStore.get(removeKey);
                getRequest.onsuccess=function(e)
                {
                    var result =getRequest.result;
                    console.dir(result);
                }
                //删除key
                var request=objectStore.delete(removeKey);
                request.onsuccess = function(e)
                {
                  console.log("success delete record!");
                };
                request.onerror = function(e)
                {
                  console.log("Error delete record:", e);
                };
                //隐藏要删除的元素
                document.getElementById(removeKey).style.display="none";
            }
        });
    }
    window.addEventListener("DOMContentLoaded", init, false);
</script>
<style type="text/css">

      body{
       font-size: 20px;
       -webkit-text-size-adjust:none;
      }

</style>
</head>
<body>
    <h1>简单留言板(js+IndexedDB数据库实现)</h1>
    <form>
        昵称:<input id="name" type="text" name="name"><br>
        内容:<textarea id="message" rows="3" cols="20"></textarea><br>
        <input id="btn1" type="button" value="提交留言" />
        <input id="delete" type="button" value="删除留言" />
    </form>
    <br>
    <p1>留言列表</p1>
    <div id="messageList"></div>
</body>
</html>

我在单步执行

  //游标查询
                objectStore.openCursor().onsuccess = function(event)
                {
                    //event.target.result获取存储空间的下一个对象
                    var cursor = event.target.result;
                    var flag=0;//

                    //判断是否存在下一个对象,不存在是curson为null
                    if (cursor)
                    {

                        console.log(cursor.key); //获取键
                        console.dir(cursor.value); //实际对象,一个Object实例
                        var msgList= document.querySelector("#messageList");
                        var msgDiv=document.createElement("div");
                        var msgTxt = document.createTextNode(cursor.value[flag]["name"]+"说:"+cursor.value[flag]["content"]);
                        msgDiv.id=cursor.key;
                        msgDiv.appendChild(msgTxt);
                        msgList.appendChild(msgDiv);
                        arrayKey.push(cursor.key);
                        flag++;
                        lastCursor=cursor.key;//记录当前游标的上一个游标
                        cursor.continue();   //将游标下移一项
                    }
                    else
                    {
                          console.log("Done with cursor");
                    }
                };

这段代码的时候,continue不能正常运行是怎么回事呀,有时候第一次f11,游标直接移动到最后 ,有时候会出现事务已经结束,从而continue不能正常执行

  • 写回答

1条回答

  • zqbnqsdsmd 2018-07-11 14:34
    关注
    评论

报告相同问题?

悬赏问题

  • ¥15 MATLAB yalmip 可转移负荷的简单建模出错,如何解决?
  • ¥15 数学的三元一次方程求解
  • ¥20 iqoo11 如何下载安装工程模式
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?