Add indexedDB-demo

shan187 · Apr 25, 2017 · 46be4c6 · 46be4c6
1 parent c0be679
commit 46be4c6
Show file tree

Hide file tree

Showing 3 changed files with 235 additions and 0 deletions.
diff --git a/indexedDB-demo/index.css b/indexedDB-demo/index.css
@@ -0,0 +1,69 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+.main{
+    width: 1150px;
+    margin: auto;
+}
+.main .v-form{
+    position: fixed;
+    top: 0;
+    width: 1150px;
+    padding: 20px 0;
+    background: #fff;
+}
+.main .v-form .v-input{
+    float: left;
+    border: 1px solid #ddd;
+    height: 40px;
+    width: 335px;
+    padding:0 10px;;
+    border-radius: 3px;
+    margin:0 20px 0 0;
+    box-sizing: border-box;
+    font-size: 16px;
+}
+.main .v-form .v-btn{
+    width: 85px;
+    height: 40px;
+    border: 1px solid #08aae5;
+    border-radius: 3px;
+    background: #08aae5;
+    color: #fff;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+.main .table{
+    width: 100%;
+    text-align: center;
+    border-spacing: 0;
+    border-left: 1px solid #ddd;
+    border-top: 1px solid #ddd;
+    margin-top: 80px;
+}
+.main .table thead{
+    background: #f3f3f3;
+}
+.main .table td,.main .table th{
+    line-height: 40px;
+    border-right: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+}
+.main .table tbody tr:hover{
+    background: #f8f8f8;
+}
+.main .table button{
+    width: 40px;
+    height: 24px;
+    border: 1px solid #08aae5;
+    border-radius: 3px;
+    background: #08aae5;
+    color: #fff;
+    cursor: pointer;
+}
+.main .table button.del{
+    border: 1px solid #F44336;
+    background: #F44336;
+}
diff --git a/indexedDB-demo/index.html b/indexedDB-demo/index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>indexedDB demo</title>
+    <link rel="stylesheet" href="index.css">
+</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="deleteOneData(item.id)">删除</button>
+                    </td>
+                </tr>
+            </table>
+        </div>
+    </div>
+    <script src="https://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script>
+    <script src="index.js"></script>
+
+    <script>
+        var vm = new Vue({
+            el: '#app',
+            data: {
+                edit_id: 0,
+                username: '',
+                age: '',
+                email: '',
+                dbData: []
+            },
+            mounted: function(){
+                openDB();
+                // indexedDB.deleteDatabase('usersDB');
+            },
+            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
+                        }
+                        saveData(param);
+                        this.getData();
+                        this.username = this.age = this.email = '';
+                    }
+                },
+                getData: function(){
+                    var self = this;
+                    searchData(function(){
+                        self.dbData = dbData;
+                    });
+                },
+                edit: function(index){
+                    this.username = dbData[index].username;
+                    this.age = dbData[index].age;
+                    this.email = dbData[index].email;
+                    this.edit_id = dbData[index].id;
+                }
+            }
+        })
+    </script>
+</body>
+</html>
diff --git a/indexedDB-demo/index.js b/indexedDB-demo/index.js
@@ -0,0 +1,77 @@
+var dbName = 'usersDB',     // 数据库名
+    daVer = 1,              // 数据库版本号
+    db = '',                // 用于数据库对象
+    dbData = [];            // 用于临时存放数据的数组
+
+// 连接数据库
+function openDB(){
+    var request = indexedDB.open(dbName, daVer);
+    request.onsuccess = function(e){
+        db = e.target.result;
+        console.log('连接数据库成功');
+        // 数据库连接成功后渲染表格
+        vm.getData();
+    }
+    request.onerror = function(){
+        console.log('连接数据库失败');
+    }
+    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 要保存到数据库的数据对象
+ */
+function saveData(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 {int} id 要删除的数据主键
+ */
+function deleteOneData(id){
+    var tx = db.transaction('Users','readwrite');
+    var store = tx.objectStore('Users');
+    var req = store.delete(id);
+    req.onsuccess = function(){
+        // 删除数据成功之后重新渲染表格
+        vm.getData();
+    }
+}
+
+/**
+ * 检索全部数据
+ * @param {function} callback 回调函数
+ */
+function searchData(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();
+        }
+    }
+}