html5d的indexDB使用

最新推荐文章于 2024-12-31 09:56:10 发布

chen-sx

最新推荐文章于 2024-12-31 09:56:10 发布

阅读量776

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 文章标签： html5 indexDB

本文链接：https://blog.youkuaiyun.com/X1164077611/article/details/49202343

html5 专栏收录该内容

1 篇文章

订阅专栏

本文通过实例演示了如何使用HTML5的IndexDB进行数据存储，包括数据库创建、数据添加及检索等关键步骤，并展示了如何利用索引和游标进行高效的数据查询。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html5d的indexDB使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        var myDB={
            name:"helloindexDB",
            version:2,
            db:null
        }
        function openDB(name,version){
            var version=version||2;
            var request=window.indexedDB.open(name,version);
            request.onerror=function(e){
                alert("发送错误");
            }
            request.onsuccess=function(e){
                myDB.db= e.target.result;
                alert("成功");
            }
            request.onupgradeneeded=function(e){
                var db= e.target.result;
                if(!db.objectStoreNames.contains("students")){
                    var store=db.createObjectStore("students",{keyPath:"id"});
                    store.createIndex("nameIndex","name",{unique:true});
                    store.createIndex("ageIndex","age",{unique:false});
                }
            }

        }
        var students=[{
            id:101,
            name:"aa",
            age:10
        }, {
            id:102,
            name:"bb",
            age:20
        },{
            id:103,
            name:"cc",
            age:11
        },{
            id:104,
            name:"dd",
            age:11
        },{
            id:105,
            name:"ff",
            age:19
        }];
        //添加数据
        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.id+"--"+student.name+"--"+student.age);
//            }
//        }
//        setTimeout(function(){
//            getDataByIndexName(myDB.db,"students")
//        },1000);
        //游标的使用
//        function fetchStoreByCursor(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();
//                }
//            }
//        }
//        setTimeout(function(){
//            fetchStoreByCursor(myDB.db,"students");
//        },1000);
        //index与游标配合
        function getData(db,storeName){
            var transaction=db.transaction(storeName);
            var store=transaction.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;
                    document.writeln(student.id);
                    cursor.continue();
                }
            }
        }
        setTimeout(function(){
            getData(myDB.db,"students");
        },1000);
        function getDataFanwei(db,storeName){
            var transaction=db.transaction(storeName);
            var store=transaction.objectStore(storeName);
            var index=store.index("ageIndex");
//            IDBKeyRange.only(value)只获得指定数据
//            IDBKeyRange.lowerBound(value,isOpen);获得最新value，isOpen是否包含value
//            IDBKeyRange.upperBound(value,isOpen);
//            IDBKeyRange.bound(value1,value2,isOpen1,isOpen2)
            var request=index.openCursor(IDBKeyRange.only(11));
            request.onsuccess=function(e){
                var cursor= e.target.result;
                if(cursor){
                    var student=cursor.value;
                    document.writeln(student.id);
                    cursor.continue();
                }
            }
        }
        setTimeout(function(){
            getDataFanwei(myDB.db,"students");
        },1000);

    </script>
</head>
<body>

</body>
</html>