indexDB

時間 2019-11-12
標籤 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: 'lisi@example.com'
                });

            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>
相關標籤/搜索
indexdb
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。