学习的DEMO Mark一下.
<!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>
<script src="../vue/vue.js"></script>
</head>
<body>
<div id="app">
ID:<input type="text" v-model="add_info.id">
Name:<input type="text" v-model="add_info.name">
age:<input type="text" v-model="add_info.age">
email:<input type="text" v-model="add_info.email">
<input type="button" value="添加" @click="add">
<input type="button" value="修改" @click="update">
<p v-for="item in list" :key="item.id">
{{ item.id }} : {{ item.name }}:{{ item.age }}:{{ item.email }} == <input type="button" value="删除" @click="del(item.id)">
</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
list:[],
db:null,
add_info:{
id:'',
name:'',
email:"",
age:''
},
database_info:{
db_name:"test1",
store:"sse",
version:1
}
},methods:{
add(){
var req = this.db.transaction([this.database_info['store']], 'readwrite').objectStore(this.database_info['store']).add(this.add_info);
req.onsuccess = (event)=> {
console.log('数据写入成功');
this.list.push(this.add_info);
};
req.onerror = (event) => {
console.log('数据写入失败');
}
},
get(){
var transaction = db.transaction([database_info['store']]);
var objectStore = transaction.objectStore(database_info['store']);
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('未获得数据记录');
}
};
},
getAll(){
this.list = [];
var objectStore = this.db.transaction(this.database_info['store']).objectStore(this.database_info['store']);
objectStore.openCursor().onsuccess = (event) => {
var cursor = event.target.result;
if (cursor) {
this.list.push(cursor.value)
cursor.continue();
} else {
console.log('没有更多数据了！');
}
};
},
update(){
var request = this.db.transaction([this.database_info['store']], 'readwrite').objectStore(this.database_info['store']).put(this.add_info);
request.onsuccess = (event) => {
console.log('数据更新成功');
this.getAll();
};
request.onerror = function (event) {
console.log('数据更新失败');
}
},
del(id){
var request = this.db.transaction([this.database_info['store']], 'readwrite').objectStore(this.database_info['store']).delete(id);
request.onsuccess = (event) => {
console.log('数据删除成功');
this.getAll();
};
}
},mounted:function(){
console.log("mounted");
var request = window.indexedDB.open(this.database_info['db_name'], this.database_info['version']);
//打开错误的回调函数
request.onerror = function (event) {console.log('数据库打开报错');};
// 成功打开的回调函数
request.onsuccess = (event) => {
console.log('数据库打开成功');
this.db = request.result;
if (!this.db.objectStoreNames.contains(this.database_info['store'])) {
objectStore = this.db.createObjectStore(this.database_info['store'], { keyPath: 'id' });
objectStore.createIndex('name', 'name', { unique: false });
objectStore.createIndex('email', 'email', { unique: true });
}
this.getAll();
};
//版本状态更新的回调函数
request.onupgradeneeded = (event) => {
this.db = event.target.result;
if (!this.db.objectStoreNames.contains(this.database_info['store'])) {
objectStore = this.db.createObjectStore(this.database_info['store'], { keyPath: 'id' });
objectStore.createIndex('name', 'name', { unique: false });
objectStore.createIndex('email', 'email', { unique: true });
}
}
}
});
</script>
</body>
</html>
