indexdb

最新推荐文章于 2024-08-30 23:57:49 发布

道济和尚

最新推荐文章于 2024-08-30 23:57:49 发布

阅读量1.5k

点赞数 3

分类专栏： indexdb 文章标签： indexdb

本文链接：https://blog.csdn.net/wenxiukeke/article/details/100096074

版权

indexdb 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

indexdb增删改查

indexdb
- indexdb增删改查案例

indexdb

写这篇文章主要是，因为项目中用到了这个东西，这篇文章的主要内容，我主要是记录一下，当时我完成app登录拦截功能时的思路。做功能之前我主要去网上参考了几篇文章，首先我去看了一下概念，了解概念以后，就分别去了解了一下indexdb是如何建库建表新增查找数据的。链接我提供一下，阮一峰网络日志

indexdb增删改查案例

这里提供一篇参考博客indexdb增删改查实例
因为我要实现登录功能，大概思路是创建数据库，然后创建数据表，将用户名存进去，下次登录直接在本地判断用户名是否存在即可，退出登录以后，先关闭数据库，在删除数据库。下面是我的测试代码，亲测可用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>indexdb</title>
</head>
<body>
<input type="button" onclick="addData(myDB.db,'students')" value="新增数据">
<input type="button" onclick="closeDB(myDB.db)" value="关闭数据库">
<input type="button" onclick="deleteDB(myDB.name)" value="删除数据库">
<script type="text/javascript">
    var myDB = {
        name: 'test',
        version: 1,
        db: null
    };

    var students = [{
        id: 1001,
        name: "Byron",
        age: 24
    }, {
        id: 1002,
        name: "Frank",
        age: 30
    }, {
        id: 1003,
        name: "Aaron",
        age: 26
    }, {
        id: 1004,
        name: "Casper",
        age: 26
    }];

    function openDB(name, version) {
        var version = version || 1;
        var request = window.indexedDB.open(name, version);
        request.onerror = function (e) {
            console.log(e.currentTarget.error.message);
        };
        request.onsuccess = function (e) {
            myDB.db = e.target.result;
        };
        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 });
            }
            console.log('DB version changed to ' + version);
        };
    }
    function closeDB(db) {
        db.close();
    }

    function deleteDB(name) {
        indexedDB.deleteDatabase(name);
    }

    function addData(db, storeName) {
        var trans = db.transaction([storeName], 'readwrite');
        var store = trans.objectStore(storeName);

        for (var i = 0; i < students.length; i++) {
            store.add(students[i]);
        }
    }

    function getDataByKey(db, storeName, value) {
        var transaction = db.transaction(storeName, 'readwrite');
        var store = transaction.objectStore(storeName);
        var request = store.get(value);
        request.onsuccess = function (e) {
            var student = e.target.result;
            console.log(student.name);
        };
    }

    function updateDataByKey(db, storeName, value) {
        var transaction = db.transaction(storeName, 'readwrite');
        var store = transaction.objectStore(storeName);
        var request = store.get(value);
        request.onsuccess = function (e) {
            var student = e.target.result;
            student.age = 35;
            store.put(student);
        };
    }

    function deleteDataByKey(db, storeName, value) {
        var transaction = db.transaction(storeName, 'readwrite');
        var store = transaction.objectStore(storeName);
        store.delete(value);
    }

    function clearObjectStore(db, storeName) {
        var transaction = db.transaction(storeName, 'readwrite');
        var store = transaction.objectStore(storeName);
        store.clear();
    }

    function deleteObjectStore(db, storeName) {
        var transaction = db.transaction(storeName, 'versionchange');
        db.deleteObjectStore(storeName);
    }

    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();
            }
        };
    }

    function getDataByIndex(db, storeName) {
        var transaction = db.transaction(storeName);
        var store = transaction.objectStore(storeName);
        var index = store.index("ageIndex");
        index.get(26).onsuccess = function (e) {
            var student = e.target.result;
            console.log(student.id);
        }
    }

    function getMultipleData(db, storeName) {
        var transaction = db.transaction(storeName);
        var store = transaction.objectStore(storeName);
        var index = store.index("nameIndex");
        var request = index.openCursor(null, IDBCursor.prev);
        request.onsuccess = function (e) {
            var cursor = e.target.result;
            if (cursor) {
                var student = cursor.value;
                console.log(student.name);
                cursor.continue();
            }
        }
    }

    openDB(myDB.name,myDB.version);
</script>
</body>
</html>

上面是一个封装好的indexdb代码，里面的方法我就暂时研究了indexdb初始化数据库，indexdb新建表并且添加数据，indexdb关闭数据库并且删除数据库，其他的暂时还没有用到了，简单看了一下，就没有测试了，感兴趣的朋友就自己测试吧，这里简单做一个记录，方便以后自己查看和回忆。