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>
![]()
浙公网安备 33010602011771号