html学习笔记（15）

最新推荐文章于 2023-02-04 20:54:59 发布

thystar

最新推荐文章于 2023-02-04 20:54:59 发布

阅读量393

点赞数

分类专栏： html web前端

本文链接：https://blog.csdn.net/thystar/article/details/47621287

版权

web前端同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

html

15 篇文章 0 订阅

订阅专栏

indexedDB数据库索引：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        var myDB = {
            name:"helloindexDB",
            version:1,
            db:null
        }
        function opendb(name, version){
            var version = version || 1;
            var request = window.indexedDB.open(name, version);
            request.onsuccess = function(e){
                myDB.db  = e.target.result;
                alert("数据库连接成功");
            }
            request.onerror = function(){
                alert("连接数据库失败")
            }
            request.onupgradeneeded = function(e){
                var db = e.target.result;
                if(!db.objectStoreNames.contains("students")){
                    var store = db.createObjectStore("students", {keyPath:"id"});
                    //createIndex(索引名称，索引字段， 是否唯一)
                    store.createIndex("nameIndex", "name", {unique:true});
                    store.createIndex("ageIndex", "age", {unique:false});
                }
            }
        }

        var students =[{
            id:101,
            name:"sss",
            age:10
        },{
            id:102,
            name:"ss",
            age:12
        },{
            id:103,
            name:"ssss",
            age:13
        }
        ];

        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);
        //name
        function getDataByIndexName(db, storeName){
            var transaction = db.transaction(storeName);
            var store = transaction.objectStore(storeName);
            var index = store.index("nameIndex");
            index.get("ss").onsuccess = function(e){
                var student = e.target.result;
                console.log(student.name + "----" + student.age + "----" + student.id);
            }
        }
        setTimeout(function(){
            getDataByIndexName(myDB.db, "students");
        },1000);
        //age
        function getDataByIndexName(db, storeName){
            var transaction = db.transaction(storeName);
            var store = transaction.objectStore(storeName);
            var index = store.index("ageIndex");
            index.get(13).onsuccess = function(e){
                var student = e.target.result;
                console.log(student.name + "----" + student.age + "----" + student.id);
            }
        }
        setTimeout(function(){
            getDataByIndexName(myDB.db, "students");
        },1000);
    </script>
</head>
<body>
<!--索引：迅速定位数据，
keypass方式索引： createindex(索引名称， 索引属性字段名， 索引属性值是否唯一)
-->
</body>
</html>

创建游标

//创建游标：
        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)