indexDB

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <label>姓名：<input type="text" id="name"></label><br>
    <label>年龄：<input type="text" id="age"></label><br>
    <label>邮箱：<input type="text" id="email"></label><br>
    <button id="add">向数据库中新增数据</button>
    <button id="read">从数据库中读取数据</button>
    <button id="readAll">读取所有数据</button>
    <button id="update">更新数据</button>
    <button id="remove">删除数据</button>
    <button id="useIndex">使用索引</button>
    <script>
        // 参考地址
        // http://www.ruanyifeng.com/blog/2018/07/indexeddb.html
        // 打开数据库
        var request = window.indexedDB.open("imgs");
        request.onerror = function (event) {
            console.log('数据库打开报错');
        };
        request.onsuccess = function (event) {
            db = request.result;
            console.log('数据库打开成功');
            console.log(db);
        };

        // 新建数据库
        //         新建数据库与打开数据库是同一个操作。如果指定的数据库不存在，就会新建。不同之处在于，后续的操作主要在upgradeneeded事件的监听函数里面完成，因为这时版本从无到有，所以会触发这个事件。

        // 通常，新建数据库以后，第一件事是新建对象仓库（即新建表）。
        var db;
        request.onupgradeneeded = function (event) {
            db = event.target.result;
            if (!db.objectStoreNames.contains('section1')) {
                // 创建表格
                var objectStore = db.createObjectStore('section1', {
                    keyPath: 'id',       //相当于表中的主键
                    autoIncrement: true
                });
                // 创建表格索引
                // IDBObject.createIndex()的三个参数分别为索引名称、索引所在的属性、配置对象（说明该属性是否包含重复的值）。
                objectStore.createIndex('name', 'name', {
                    unique: false
                });
                objectStore.createIndex('email', 'email', {
                    unique: false
                });
            }

        }

        // 新增数据
        // 必须启动服务器环境才能添加数据成功
        function add() {
            var request = db.transaction(['section1'], 'readwrite')
                .objectStore('section1')
                .add({
                    name: document.getElementById("name").value,
                    age: document.getElementById("age").value,
                    email: document.getElementById("email").value
                });

            request.onsuccess = function (event) {
                console.log('数据写入成功');
            };

            request.onerror = function (event) {
                console.log('数据写入失败');
            }
        }
        document.getElementById("add").onclick = add;


        //读取数据
        function read() {
            var transaction = db.transaction(['section1']);
            var objectStore = transaction.objectStore('section1');
            var request = objectStore.get(1);

            request.onerror = function (event) {
                console.log('事务失败');
            };

            request.onsuccess = function (event) {
                if (request.result) {
                    console.log('Name: ' + request.result.name);
                    console.log('Age: ' + request.result.age);
                    console.log('Email: ' + request.result.email);
                } else {
                    console.log('未获得数据记录');
                }
            };
        }
        document.getElementById("read").onclick = read;

        //读取所有数据
        function readAll() {
            var objectStore = db.transaction('section1').objectStore('section1');

            objectStore.openCursor().onsuccess = function (event) {
                var cursor = event.target.result;

                if (cursor) {
                    console.log('Id: ' + cursor.key);
                    console.log('Name: ' + cursor.value.name);
                    console.log('Age: ' + cursor.value.age);
                    console.log('Email: ' + cursor.value.email);
                    cursor.continue();
                } else {
                    console.log('没有更多数据了！');
                }
            };
        }
        document.getElementById("readAll").onclick = readAll;

        //更新数据
        function update() {
            var request = db.transaction(['section1'], 'readwrite')
                .objectStore('section1')
                .put({
                    id: 1,
                    name: '李四',
                    age: 35,
                    email: '[email protected]'
                });

            request.onsuccess = function (event) {
                console.log('数据更新成功');
            };

            request.onerror = function (event) {
                console.log('数据更新失败');
            }
        }

        document.getElementById("update").onclick = update;

        //删除数据
        function remove() {
            var request = db.transaction(['section1'], 'readwrite')
                .objectStore('section1')
                .delete(1);

            request.onsuccess = function (event) {
                console.log('数据删除成功');
            };
        }
        document.getElementById("remove").onclick = remove;

        // 使用索引
        // 索引的意义在于，可以让你搜索任意字段，也就是说从任意字段拿到数据记录。如果不建立索引，默认只能搜索主键（即从主键取值）。

        // 假定新建表格的时候，对name字段建立了索引。

        function useIndex(){
            var transaction = db.transaction(['section1'], 'readonly');
            var store = transaction.objectStore('section1');
            var index = store.index('name');
            var request = index.get('ls');
            request.onsuccess = function (e) {
                var result = e.target.result;
                if (result) {
                    // ...
                    console.log(result);
                } else {
                    // ...
                    console.log("没有找到数据")
                }
                }
        }
        

        document.getElementById("useIndex").onclick = useIndex;
    </script>
</body>

</html>
猜你喜欢
