IndexedDB

時間 2019-12-11

標籤 indexeddb 简体版

原文原文鏈接

var myDB = (function(){
    return {
        dbName: 'usersDB',     // 數據庫名
        daVer: 1,              // 數據庫版本號
        db: '',                // 用於數據庫對象
        dbData: [],            // 用於臨時存放數據的數組

// 鏈接數據庫
    openDB: function(){
        var request = indexedDB.open(this.dbName, this.daVer);
        request.onsuccess = function(e){
            db = e.target.result;
            console.log('鏈接數據庫成功');
            // 數據庫鏈接成功後渲染表格
            vm.getData();
        }
        request.onerror = function(){
            console.log('鏈接數據庫失敗');
        }
        // onupgradeneeded事件在第一次打開頁面初始化數據庫時會被調用，或在當有版本號變化時
        request.onupgradeneeded = function(e){
            db = e.target.result;
            // 若是不存在Users對象倉庫則建立
            if(!db.objectStoreNames.contains('Users')){
                var store = db.createObjectStore('Users',{keyPath: 'id', autoIncrement: true});
                var idx = store.createIndex('index','username',{unique: false})
            }
        }
    },

    /**
     * 保存數據
     * @param {Object} data 要保存到數據庫的數據對象
     */
    saveData: function(data){
        var tx = db.transaction('Users','readwrite');
        var store = tx.objectStore('Users');
        var req = store.put(data);
        req.onsuccess = function(){
            console.log('成功保存id爲'+this.result+'的數據');
        }
    },

    /**
     * 更新數據
     * @param {function} callback 回調函數
     */
    updataData: function(key,newData){
        var tx = db.transaction('Users','readwrite');
        var store = tx.objectStore('Users');
        var req = store.get(key);
        req.onsuccess = function(e) {
            var data = e.target.result;
            for (a in newData) {
                data[a] = newData[a]
            }
            store.put(data);
        };
    },

    /**
     * 刪除單條數據
     * @param {int} id 要刪除的數據主鍵
     */
    deleteOneData: function(id){
        var tx = db.transaction('Users','readwrite');
        var store = tx.objectStore('Users');
        var req = store.delete(id);
        req.onsuccess = function(){
            // 刪除數據成功以後從新渲染表格
            vm.getData();
        }
    },
    /**
     * 根據key查詢數據
     * @param {int} key 要搜索的數據主鍵
     */
    keyServerData: function(key){
        var tx = db.transaction('Users','readwrite');
        var store = tx.objectStore('Users');
        var req = store.get(key);
        req.onsuccess = function(e){
            data = e.target.result;
            console.log(data)
        }
    },
    /**
     * 根據索引查詢數據
     * @param {int} key 要搜索的數據主鍵
     */
    indexServerData: function(index,name){
        var tx = db.transaction('Users','readwrite');
        var store = tx.objectStore('Users');
        var req = store.index(index).get(name);
        req.onsuccess = function(e){
            data = e.target.result;
            console.log(data)
        }
    },
    /**
     * 檢索所有數據
     * @param {function} callback 回調函數
     */
    searchData: function(callback){
        var tx = db.transaction('Users','readonly');
        var store = tx.objectStore('Users');
        var range = IDBKeyRange.lowerBound(1);
        var req = store.openCursor(range,'next');
        // 每次檢索從新清空存放數據數組
        dbData = [];
        req.onsuccess = function(){
            var cursor = this.result;
            if(cursor){
                // 把檢索到的值push到數組中
                dbData.push(cursor.value);
                cursor.continue();
            }else{
                // 數據檢索完成後執行回調函數
                callback && callback();
            }
        }
    },
    /**
     * 關閉數據庫
     * @param {String} name 數據庫名
     */
    closeDB: function(name) {
        db.close();
    },
    /**
     * 刪除數據庫
     * @param {String} str 數據庫名
     */
    deleteDB: function(name) {
        indexedDB.deleteDatabase(name);
    }
}
})()

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
    <script src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>
    <script src="node_modules/_indexeddbshim@3.7.0@indexeddbshim/dist/indexeddbshim.min.js"></script>
</head>
<body>
<div id="app">
    <div class="main">
        <div class="v-form">
            <input type="text" class="v-input" placeholder="請輸入姓名" name="username" v-model="username">
            <input type="text" class="v-input" placeholder="請輸入年齡" name="age" v-model="age">
            <input type="text" class="v-input" placeholder="請輸入郵箱" name="email" v-model="email">
            <button type="text" class="v-btn" @click="submit">提交</button>
        </div>
        <table class="table">
            <thead>
            <th>#</th>
            <th>用戶名</th>
            <th>年齡</th>
            <th>郵箱</th>
            <th>操做</th>
            </thead>
            <tr v-for="(item,i) in dbData" :key="item.id">
                <td v-html="i+1"></td>
                <td v-html="item.username"></td>
                <td v-html="item.age"></td>
                <td v-html="item.email"></td>
                <td>
                    <button class="edit" @click="edit(i)">編輯</button>
                    <button class="del" @click="myDB.deleteOneData(item.id)">刪除</button>
                </td>
            </tr>
        </table>
        <button @click="fn">更新</button>
        <button @click="searchKey">查詢index</button>
        <button @click="searchId">查詢key</button>
    </div>
</div>
<script src="https://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script>
<script src="index.js"></script>

<script>

    function fn() {
        myDB.updataData(4,{username: '王老吉'})
    }
    function searchKey() {
        myDB.indexServerData('index','SharkChilli')
    }
    function searchId() {
        myDB.keyServerData(4)
    }
    var vm = new Vue({
        el: '#app',
        data: {
            edit_id: 0,
            username: '',
            age: '',
            email: '',
            dbData: []
        },
        mounted: function(){
            myDB.openDB();
        },
        methods: {
            submit: function(){
                if(this.username && this.age && this.email){
                    var param = {
                        username: this.username,
                        age: this.age,
                        email: this.email
                    }
                    if(this.edit_id > 0){
                        param.id = this.edit_id
                    }
                    myDB.saveData(param);
                    this.getData();
                    this.username = this.age = this.email = '';
                }
            },
            getData: function(){
                var self = this;
                myDB.searchData(function(){
                    self.dbData = myDB.dbData;
                });
            },
            edit: function(index){
                this.username = myDB.dbData[index].username;
                this.age = myDB.dbData[index].age;
                this.email = myDB.dbData[index].email;
                this.edit_id = myDB.dbData[index].id;
            }
        }
    })
</script>
</body>
</html>

相關標籤/搜索

indexeddb

javascript+indexeddb

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。