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>
