From 46be4c623987354c5f9aa28dde7c81b20ce4c84c Mon Sep 17 00:00:00 2001
From: lin-xin <2981207131@qq.com>
Date: Tue, 25 Apr 2017 15:33:26 +0800
Subject: [PATCH] Add indexedDB-demo
---
indexedDB-demo/index.css | 69 ++++++++++++++++++++++++++++++
indexedDB-demo/index.html | 89 +++++++++++++++++++++++++++++++++++++++
indexedDB-demo/index.js | 77 +++++++++++++++++++++++++++++++++
3 files changed, 235 insertions(+)
create mode 100644 indexedDB-demo/index.css
create mode 100644 indexedDB-demo/index.html
create mode 100644 indexedDB-demo/index.js
diff --git a/indexedDB-demo/index.css b/indexedDB-demo/index.css
new file mode 100644
index 0000000..b796ffd
--- /dev/null
+++ 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;
+}
\ No newline at end of file
diff --git a/indexedDB-demo/index.html b/indexedDB-demo/index.html
new file mode 100644
index 0000000..49273de
--- /dev/null
+++ b/indexedDB-demo/index.html
@@ -0,0 +1,89 @@
+
+
+
+
+
+
+ indexedDB demo
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/indexedDB-demo/index.js b/indexedDB-demo/index.js
new file mode 100644
index 0000000..03c701b
--- /dev/null
+++ 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();
+ }
+ }
+}
\ No newline at end of file