indexedDB总结

package-lock.json

@@ -4684,6 +4684,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "dayjs": {
+      "version": "1.10.6",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.6.tgz",
+      "integrity": "sha512-AztC/IOW4L1Q41A86phW5Thhcrco3xuAA+YX/BLpLWWjRcTj5TOt/QImBLmCKlrF7u7k47arTnOyL6GnbG8Hvw=="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/de-indent/download/de-indent-1.0.2.tgz",

package.json

@@ -11,6 +11,7 @@
     "ant-design-vue": "^1.2.4",
     "compression-webpack-plugin": "^6.1.1",
     "core-js": "^3.6.5",
+    "dayjs": "^1.10.6",
     "echarts": "^4.9.0",
     "echarts-gl": "^1.1.1",
     "js-md5": "^0.7.3",

src/main.js

@@ -3,7 +3,7 @@
  * @email: binbin0314@126.com
  * @Date: 2021-07-09 09:10:13
  * @LastEditors: aBin
- * @LastEditTime: 2021-07-09 10:10:58
+ * @LastEditTime: 2021-07-12 10:49:37
  */
 // @ts-ignore
 import Vue from 'vue';
@@ -15,11 +15,13 @@ import store from './store';
 import './plugins/ant-design-vue.js';
 import 'common/portrait.styl';
 import md5 from 'js-md5';
+import * as dayjs from 'dayjs';
 // import './assets/icon/iconfont.css';
 // import VueDOMPurifyHTML from 'vue-dompurify-html';
 // import moment from 'moment'; //导入文件
 // Vue.prototype.$moment = moment; //赋值使用
 Vue.prototype.$md5 = md5;
+Vue.prototype.$dayjs = dayjs;
 Vue.config.productionTip = false;
 
 window.vm = new Vue({

src/router/index.js

@@ -3,11 +3,11 @@
  * @email: binbin0314@126.com
  * @Date: 2021-06-05 12:16:54
  * @LastEditors: aBin
- * @LastEditTime: 2021-07-09 09:11:07
+ * @LastEditTime: 2021-07-12 10:38:20
  */
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import Home from 'views/Index/Index.vue';
+import Home from 'views/Index/Index1.vue';
 
 Vue.use(VueRouter);
 

src/views/Index/Index.vue

@@ -3,7 +3,7 @@
  * @email: binbin0314@126.com
  * @Date: 2021-07-09 09:10:14
  * @LastEditors: aBin
- * @LastEditTime: 2021-07-09 19:01:32
+ * @LastEditTime: 2021-07-12 15:33:35
 -->
 <template>
   <div style="padding: 12px">
@@ -60,6 +60,7 @@ export default {
         console.log('error', error);
       }
     },
+    // 首先判断浏览器是否支持indexedDB
     justifyIndexDEB() {
       if ('indexedDB' in window) {
         // 支持
@@ -71,52 +72,35 @@ export default {
         window.indexedDB = window.mozIndexedDB || window.webkitIndexedDB;
       }
     },
+    // 新建数据库
     createindexDB() {
       const that = this;
       //1-我们先创建一个对象，放一些数据比如dbInfo ，可以设置数据库名字dbName，数据库的版本dbVersion
-
       var dbInfo = {
         dbName: 'DataBase',
         dbVersion: 2021,
         dbInstance: {},
       };
-
+      //2-创建数据库 indexedDB.open方法用于打开数据库。返回的是一个对象，
-      //2-创建数据库 indexedDB.open方法用于打开数据库。返回的是一个对象，第一个参数是数据库名称，格式为字符串。第二个参数是数据库版本。
+      //  第一个参数是数据库名称，格式为字符串。第二个参数是数据库版本。
-
       var openRequest = window.indexedDB.open(dbInfo.dbName, dbInfo.dbVersion);
-
       //3-创建数据库时会处罚三个事件之一，这三个事件，分别是upgradeneeded，success，onerror，意思就不说了吧，不懂得可以用字典查嘛。
-
       openRequest.onupgradeneeded = function(e) {
         //第一次打开数据库 ^-*
-
         console.log('第一次打开该数据库，或者数据库版本发生变化....', new Date().getTime());
         that.db = e.target.result;
         var storeNames = that.db.objectStoreNames;
-
         //创建数据库的表格（或者叫数据库仓库）
         if (!storeNames.contains('chart')) {
           that.db.createObjectStore('chart', { keyPath: 'kkk' });
         }
       };
-
       openRequest.onsuccess = function(e) {
         //success：打开成功^-^
         console.log('数据库打开成功...', new Date().getTime());
         that.db = e.target.result;
         var trans = that.db.transaction(['chart'], 'readwrite');
-        var store = trans.objectStore('chart');
-
-        //4-这里面我要写很多要调用的函数了，比如，下面.....wu la wu la.....
-
-        // that.addData(); //数据库中添加数据   ------->xian说这个啦
-        // del_data(db); //数据库中删除数据
-        // deal_data(db); //读取数据
-        // traverse_data(db); //遍历数据
-        // that.read();
-        // that.update_data(); //更新数据（类似于Add方法）
       };
-
       openRequest.onerror = function(e) {
         //error：打开失败*-*
         console.log('数据库打开失败...');
@@ -202,6 +186,29 @@ export default {
       var request = store.put(obj);
       console.log('已更新数据', new Date().getTime());
     },
+    remove_data() {
+      //1-把前面创建的数据库，传递过来
+      //2-返回一个事务对象,indexDB 数据库只有  readwrite 以及readonly两个可爱的状态。 返回一个事务对象。
+      var trans = this.db.transaction(['chart'], 'readwrite');
+      var store = trans.objectStore('chart');
+
+      // 3-通过关键字（索引）删除数据
+      var request = store.delete(1);
+      request.onsuccess = function(event) {
+        console.log('数据删除成功');
+      };
+    },
+    readAll() {
+      var trans = this.db.transaction(['chart'], 'readwrite');
+      var store = trans.objectStore('chart');
+      store.openCursor().onsuccess = function(event) {
+        if (event.target.result) {
+          console.log(event.target.result);
+        } else {
+          console.log('没有更多数据了！');
+        }
+      };
+    },
   },
 };
 </script>

src/views/Index/Index1.vue

@@ -0,0 +1,27 @@
+<!--
+ * @Author: aBin
+ * @email: binbin0314@126.com
+ * @Date: 2021-07-12 10:36:28
+ * @LastEditors: aBin
+ * @LastEditTime: 2021-07-12 10:50:04
+-->
+<template>
+  <div>123</div>
+</template>
+<script>
+export default {
+  name: 'Index1',
+  data() {
+    return { time: null };
+  },
+  created() {
+    this.getTime();
+  },
+  methods: {
+    getTime() {
+      const time = this.$dayjs().format();
+      console.log(time); // 2021-07-12T10:49:59+08:00
+    },
+  },
+};
+</script>