Html5——indexedDB数据库学习记录6之【游标与index和游标结合】

最新推荐文章于 2025-04-24 13:33:47 发布
原创最新推荐文章于 2025-04-24 13:33:47 发布 · 1k 阅读
0 ·
本内容遵循CC 4.0 BY-SA版权协议
标签
#indexedDB数据库
Html5 同时被 2 个专栏收录
15 篇文章
订阅专栏
indexedDB数据库
6 篇文章
订阅专栏
本文介绍了IndexedDB数据库中如何创建表及索引，并详细解释了如何利用游标遍历索引，包括基本的游标操作及不同条件下的数据检索。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>游标与index和游标结合</title>
    <script>
        var myDB={
            name:"helloindexDB",
            version:1,
            db:null
        }

        function openDB(name,version){
            var version =version || 1;
            var request=widow.indexedDB.open(name,version);
            request.onerror=function(e){

            }
            request.onsuccess=function(e){
                myDB.db=e.target.result;
            }
            //以下是 对 数据表 进行操作
            request.onupgradeneeded=function(e){
                var db=e.target.result;
                //如果没有 student 表
                if(!db.objectStoreNames.contains("students"))
                {
                    //创建student表，并设置id为key
                    var story=db.createObjectStore("students",{keyPath:"id"});
                    //创建字段
                    story.createIndex("nameIndex","name",{unique:true} );
                    story.createIndex("ageIndex","age",{unique:false});

                }
            }
        }
        var students=
        [
             {
                id:101，
                name:"aa",
                age:10
             }, 
             {
                id:102，
                name:"bb",
                age:11
             },
             {
                id:103，
                name:"cc",
                age:12
             }
        ]

        function addData(db,storeName){
            var transaction=db.transaction(storeName,"readwrite");//读取权限
            var store=transaction.objectStore(storeName);
            for(var i=0;i<students.length;i++)
            {
                store.add(students[i]);
            }
        }

        //执行操作
        openDB(myDB.name,myDB.version);

        setTimeout(function(){
            addData(myDB.db,"students");
        },1000);

        //以上是上一节内容
        //通过 姓名 来获取数据
        function getDataByIndexName(db,storeName){
            var transaction=db.transaction(storeName);//通过链接来获取数据表（数据仓库）
            var store=transaction.objectStore(storeName);//实例化数据表
            var index=store.index("nameIndex");//获取索引
            index.get("aa").onsuccess=function(e){
                var student=e.target.result;
                console.log(student.name+"--"+student.age+"--"+student.id);

            }

        
        }
        //执行 getDataByIndexName
        setTimeout(function(){
            getDataByIndexName(myDB.db,"students");
        },1000)

        //通过 年龄 来获取数据
        function getDataByIndexAge(db,storeName){
            var transaction=db.transaction(storeName);//通过链接来获取数据表（数据仓库）
            var store=transaction.objectStore(storeName);
            var index=store.index("ageIndex");
            index.get(11).onsuccess=function(e){
                var student=e.target.result;
                console.log("姓名："+student.name+"--年龄："+student.age+"--id："+student.id);
            }


        }

       //执行 getDataByIndexAge
        setTimeout(function(){
            getDataByIndexAge(myDB.db,"students");
        },1000)

        // {# 
        //      综上所述：通过name来获取的数据是可以获得相同name的数据，但是age不行。因为name是唯一的，
        // age不是唯一的 ，
        //      所以 要用 “游标” 来解决
        // #}
       
       //以上是上一节的内容
       //游标的使用

       function fetchStoryByCursor(db,storeName){
           var transaction=db.transaction(storeName);
           var store=transaction.objectStore(storeName);
           var request=store.openCursor();//打开游标
           request.onsuccess=function(e){
               var cursor=e.target.result;
                if(cursor)//如果 可以 使用 “游标”
                {
                    console.log(cursor.key);
                    var currentStudent=cursor.value;
                    console.log(currentStudent.name);
                    cursor.continue();//使游标下移 如果没有 就 返回 undifined
                
                }


           }

       }

       setTimeout(function(){
           fetchStoryByCursor(myDB.db,"students");
       },1000)

        //index与游标结合
        function getData(db,storeName){
            var transaction=db.transaction(storeName);
            var store=db.objectStore(storeName);
            var index=store.index("ageIndex");
            var request=index.openCursor(IDBKeyRange.only(11));
            request.onsuccess=function(e){
                var cursor=e.target.result;
                if(cursor){
                    var student=cursor.value;
                    console.log(student.id);
                    cursor.continue();
                }

            }


        }

       setTimeout(function(){
           getData(myDB.db,"students");
       },1000)


       //openCursor范围
       function getDatafanwei(db,storeName){
           var transaction=db.transaction(storeName);
            var store=db.objectStore(storeName);
            var index=store.index("nameIndex");
            //IDBKeyRange.only(value) 只获取指定的数据
            //IDBKeyRange.lowerbound(value,isOpen) 第一个获取最小值是value，第二个参数是指 是否排除value本身
            //IDBKeyRange.upperbound(value,isOpen) 第一个获取最大值是value，第二个参数是指 是否排除value本身
            //IDBKeyRange.bound(value1,value2,isOpen1,isOpen2) 
            //var request=index.openCursor(IDBKeyRange.only(11));
            var request=index.openCursor(IDBKeyRange.bound("b","z",false,true));
            
            request.onsuccess=function(e){
                var cursor=e.target.result;
                if(cursor){
                    var student=cursor.value;
                    console.log(student.id);
                    cursor.continue();
                }

            }
       }

        setTimeout(function(){
           getDatafanwei(myDB.db,"students");
       },1000)

    </script>
    
    
</head>

<body >
   


</body>

</html>