indexdb

indexdb概念了解

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

indexdb增删改查案例

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!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关闭数据库并且删除数据库，其他的暂时还没有用到了，简单看了一下，就没有测试了，感兴趣的朋友就自己测试吧，这里简单做一个记录，方便以后自己查看和回忆。