1. // indexedDB.js，浏览器本地数据库操作
  2.  
  3. export default {
  4.     // indexedDB兼容
  5.     indexedDB: window.indexedDB || window.webkitindexedDB || window.msIndexedDB || mozIndexedDB,
  6.     // 打开数据库
  7.     // 新对象储存空间newStore参数：newStore.name、newStore.key
  8.     // 新增对象存储空间要更改数据库版本
  9.     openDB: function (dbname, version, db, newStore, callback) {
  10.         var version = version || ;
  11.         var request = this.indexedDB.open(dbname, version);
  12.         request.onerror = function (event) {
  13.             console.log('IndexedDB数据库打开错误');
  14.         };
  15.         request.onsuccess = function (event) {
  16.             db = event.target.result;
  17.             if (callback && (typeof callback === 'function')) {
  18.                 callback(db);
  19.             }
  20.         };
  21.         // onupgradeneeded，调用创建新的储存空间
  22.         request.onupgradeneeded = function (event) {
  23.             var db = event.target.result;
  24.             if (newStore) {
  25.                 if (!db.objectStoreNames.contains(newStore.name)) {
  26.                     var objectStore = db.createObjectStore(newStore.name, {
  27.                         keyPath: newStore.key,
  28.                     });
  29.                     objectStore.createIndex('counter_index', 'counter', { unique: false });
  30.                     objectStore.createIndex('barcode_index', 'barcode', { unique: false });
  31.                     objectStore.createIndex('qty_index', 'qty', { unique: false });
  32.                     objectStore.createIndex('counter_code', ['counter', 'barcode'], { unique: false });
  33.                 }
  34.             }
  35.         };
  36.     },
  37.     // 删除数据库
  38.     deleteDB: function (dbname, callback) {
  39.         var deleteQuest = this.indexedDB.deleteDatabase(dbname);
  40.         deleteQuest.onerror = function () {
  41.             console.log('删除数据库出错');
  42.         };
  43.         deleteQuest.onsuccess = function () {
  44.             if (callback && (typeof callback === 'function')) {
  45.                 callback();
  46.             }
  47.         }
  48.     },
  49.     // 关闭数据库
  50.     closeDB: function (dbname) {
  51.         dbname.close();
  52.         console.log('数据库已关闭');
  53.     },
  54.     // 更新旧值,针对输入数量
  55.     putData: function (db, storename, dataArr, callback) {
  56.         let mybarcode = "";
  57.         let QTY = "";
  58.         let key = "";
  59.         let counter = "";
  60.         let barcode = "";
  61.         let addtime = "";
  62.         dataArr.forEach(item => {
  63.             mybarcode = item.barcode;
  64.             QTY = item.qty;
  65.             barcode = item.barcode;
  66.             counter = item.counter;
  67.             key = item.counterCode;
  68.             addtime = item.addtime;
  69.  
  70.         });
  71.         this.getdatabycursor(db, storename).then(arr => {
  72.             if (arr.length == ) {
  73.                 //console.log("添加")
  74.                 var store = db.transaction(storename, 'readwrite').objectStore(storename),
  75.                     request;
  76.                 for (var i = , len = dataArr.length; i < len; i++) {
  77.                     request = store.put(dataArr[i]);
  78.                     request.onerror = function () {
  79.                         console.error('PUT添加数据报错');
  80.                     };
  81.                     request.onsuccess = function (result) {
  82.                         if (callback && (typeof callback === 'function')) {
  83.                             callback();
  84.                         }
  85.                     };
  86.                 }
  87.             }
  88.             else {
  89.                 this.read(db, storename, counter, barcode).then(x => {
  90.                     if (x) {
  91.                         //console.log("最新的值是" + QTY)
  92.                         this.updateDataByKey(db, storename, key, QTY, addtime).then(x => {
  93.                             if (callback && (typeof callback === 'function')) {
  94.                                 callback();
  95.                             }
  96.  
  97.                         });
  98.  
  99.                     }
  100.                     else {
  101.                         //console.log("再次添加")
  102.                         var store = db.transaction(storename, 'readwrite').objectStore(storename),
  103.                             request;
  104.                         for (var i = , len = dataArr.length; i < len; i++) {
  105.                             request = store.put(dataArr[i]);
  106.                             request.onerror = function () {
  107.                                 console.error('PUT添加数据报错');
  108.                             };
  109.                             request.onsuccess = function (result) {
  110.                                 if (callback && (typeof callback === 'function')) {
  111.                                     callback();
  112.                                 }
  113.                             };
  114.                         }
  115.                     }
  116.                 })
  117.             }
  118.         })
  119.     },
  120.     // 更新旧值
  121.     putDatas: function (db, storename, dataArr, callback) {
  122.         let mybarcode = "";
  123.         let QTY = "";
  124.         let key = "";
  125.         let counter = "";
  126.         let barcode = "";
  127.         let addtime = "";
  128.         dataArr.forEach(item => {
  129.             mybarcode = item.barcode;
  130.             QTY = item.qty;
  131.             key = item.counterCode;
  132.             counter = item.counter;
  133.             barcode = item.barcode;
  134.             addtime = item.addtime;
  135.  
  136.         });
  137.         this.getdatabycursor(db, storename).then(arr => {
  138.             if (arr.length == ) {
  139.                 //console.log("添加")
  140.                 var store = db.transaction(storename, 'readwrite').objectStore(storename),
  141.                     request;
  142.                 for (var i = , len = dataArr.length; i < len; i++) {
  143.                     request = store.add(dataArr[i]);
  144.                     request.onerror = function () {
  145.                         console.error('PUT添加数据报错');
  146.                     };
  147.                     request.onsuccess = function (result) {
  148.                         if (callback && (typeof callback === 'function')) {
  149.                             callback();
  150.                         }
  151.                     };
  152.                 }
  153.             }
  154.             else {
  155.                 this.read(db, storename, counter, barcode).then(x => {
  156.                     if (x) {
  157.                         this.updateDataByKeys(db, storename, key, addtime).then(x => {
  158.                             this.getdata(db, storename).then(result => {
  159.                                 if (callback && (typeof callback === 'function')) {
  160.                                     callback();
  161.                                 }
  162.                             });
  163.                         });
  164.  
  165.                     }
  166.                     else {
  167.                         //console.log("再次添加")
  168.                         //console.log("当前的值是"+barcode)
  169.                         var store = db.transaction(storename, 'readwrite').objectStore(storename),
  170.                             request;
  171.                         for (var i = , len = dataArr.length; i < len; i++) {
  172.                             request = store.add(dataArr[i]);
  173.                             request.onerror = function () {
  174.                                 console.error('PUT添加数据报错');
  175.                             };
  176.                             request.onsuccess = function (result) {
  177.                                 if (callback && (typeof callback === 'function')) {
  178.                                     callback();
  179.                                 }
  180.                             };
  181.                         }
  182.  
  183.                     }
  184.                 })
  185.             }
  186.         })
  187.     },
  188.     //根据key修改数量
  189.     updateDataByKey: function (db, storeName, value, QTY, addtime) {
  190.         var transaction = db.transaction(storeName, 'readwrite');
  191.         var store = transaction.objectStore(storeName);
  192.         var request = store.get(value);
  193.         return new Promise((resolve, reject) => {
  194.             request.onsuccess = function (e) {
  195.                 var stocktable = e.target.result;
  196.                 if (stocktable) {
  197.                     stocktable.qty = QTY;
  198.                     stocktable.addtime = addtime;
  199.                     resolve(store.put(stocktable));
  200.                 }
  201.                 else {
  202.                     reject(false);
  203.                 }
  204.  
  205.             };
  206.  
  207.         })
  208.  
  209.     },
  210.  
  211.       updateDataBycode: function (db, storeName, value, QTY) {
  212.         var transaction = db.transaction(storeName, 'readwrite');
  213.         var store = transaction.objectStore(storeName);
  214.         var request = store.get(value);
  215.         return new Promise((resolve, reject) => {
  216.             request.onsuccess = function (e) {
  217.                 var stocktable = e.target.result;
  218.                 if (stocktable) {
  219.                     stocktable.qty = QTY;
  220.  
  221.                     resolve(store.put(stocktable));
  222.                 }
  223.                 else {
  224.                     reject(false);
  225.                 }
  226.  
  227.             };
  228.  
  229.         })
  230.  
  231.     },
  232.     //根据key修改数量
  233.     updateDataByKeys: function (db, storeName, value, addtime, callback) {
  234.         var transaction = db.transaction(storeName, 'readwrite');
  235.         var store = transaction.objectStore(storeName);
  236.         var request = store.get(value);
  237.  
  238.         return new Promise((resolve, reject) => {
  239.             //console.log(addtime)
  240.             request.onsuccess = function (e) {
  241.                 var stocktable = e.target.result;
  242.                 if (stocktable) {
  243.                     stocktable.qty += ;
  244.                     stocktable.addtime = addtime;
  245.                     resolve(store.put(stocktable));
  246.                 }
  247.                 else {
  248.                     reject(false);
  249.                 }
  250.  
  251.             };
  252.         })
  253.  
  254.     },
  255.     // 删除数据
  256.     deleteData: function (db, storename, key, callback) {
  257.         var store = db.transaction(storename, 'readwrite').objectStore(storename);
  258.         store.delete(key);
  259.         if (callback && (typeof callback === 'function')) {
  260.             callback();
  261.         }
  262.  
  263.     },
  264.     // 清空数据
  265.     clearData: function (db, storename, callback) {
  266.         var store = db.transaction(storename, 'readwrite').objectStore(storename);
  267.         store.clear();
  268.         if (callback && (typeof callback === 'function')) {
  269.             callback();
  270.         }
  271.     },
  272.     // 通过key获取数据
  273.     read: function (db, storeName, counter, barcode) {
  274.         var transaction = db.transaction(storeName);
  275.         var objectStore = transaction.objectStore(storeName);
  276.         var currentdata = [counter, barcode];
  277.         var indexs = objectStore.index('counter_code');
  278.         var request = indexs.openCursor(IDBKeyRange.only(currentdata));
  279.         return new Promise((resolve, reject) => {
  280.             request.onsuccess = function (e) {
  281.                 var cursor = e.target.result;
  282.                 if (cursor) {
  283.                     resolve(true);
  284.                 }
  285.                 else {
  286.                     resolve(false);
  287.                 }
  288.             }
  289.         })
  290.  
  291.     },
  292.     // 通过barcode获取数据
  293.     reads: function (db, storeName, values) {
  294.         var transaction = db.transaction(storeName);
  295.         var objectStore = transaction.objectStore(storeName);
  296.         var indexs = objectStore.index('barcode_index');
  297.         var data = [];
  298.         var request = indexs.openCursor(IDBKeyRange.only(values));
  299.         return new Promise((resolve, reject) => {
  300.             request.onsuccess = function (e) {
  301.                 var cursor = e.target.result;
  302.                 if (cursor) {
  303.                     data.push(cursor.value);
  304.                     // resolve(data);
  305.                     cursor.continue();
  306.                 }
  307.                 else {
  308.                     resolve(data)
  309.                 }
  310.             };
  311.         })
  312.  
  313.     },
  314.     //根据counter索引查询数据
  315.     getdatabyCounter: function (db, storeName, values) {
  316.         var transaction = db.transaction(storeName);
  317.         var store = transaction.objectStore(storeName);
  318.         var indexs = store.index('counter_index');
  319.         var datas = [];
  320.         var request = indexs.openCursor(IDBKeyRange.only(values))
  321.         return new Promise((resolve, reject) => {
  322.             request.onsuccess = function (e) {
  323.                 var cursor = e.target.result;
  324.                 if (cursor) {
  325.                     datas.push(cursor.value);
  326.                     cursor.continue();
  327.                 }
  328.                 else {
  329.                     resolve(datas)
  330.                 }
  331.             }
  332.         })
  333.  
  334.     },
  335.     //根据主键和索引查询
  336.     getAll: function (db, storeName, counter, barcode) {
  337.         var transaction = db.transaction(storeName);
  338.         var objectStore = transaction.objectStore(storeName);
  339.         var counterCode = [counter, barcode];
  340.         var indexs = objectStore.index('counter_code');
  341.         var request = indexs.openCursor(IDBKeyRange.only(counterCode));
  342.         var data = [];
  343.         return new Promise((resolve, reject) => {
  344.             request.onsuccess = function (e) {
  345.                 var cursor = e.target.result;
  346.                 if (cursor) {
  347.                     data.push(cursor.value);
  348.                     //resolve(data);
  349.                     cursor.continue();
  350.                 }
  351.                 else {
  352.                     resolve(data)
  353.                 }
  354.  
  355.             }
  356.         })
  357.     },
  358.     //根据key查询数量是否存在
  359.     getqtyBykey: function (db, storeName, key) {
  360.         var transaction = db.transaction(storeName);
  361.         var objectStore = transaction.objectStore(storeName);
  362.         var request = objectStore.get(key);
  363.         request.onerror = function (event) {
  364.             console.log('事务失败');
  365.         };
  366.         return new Promise((resolve, reject) => {
  367.             request.onsuccess = function (event) {
  368.                 if (request.result) {
  369.                     //console.log(request.result.qty)
  370.                     resolve(request.result);
  371.                 } else {
  372.                     resolve(false);
  373.                 }
  374.             };
  375.         })
  376.  
  377.     },
  378.     // //通过游标遍历数据
  379.     getdatabycursor: function (db, storename) {
  380.         var objectStore = db.transaction(storename).objectStore(storename);
  381.         var dataList = [];
  382.         var i = ;
  383.         return new Promise((resolve, reject) => {
  384.             objectStore.openCursor().onsuccess = function (event) {
  385.                 var cursor = event.target.result;
  386.                 if (cursor) {
  387.                     dataList.push(cursor.value)
  388.                     cursor.continue();
  389.                 } else {
  390.                     resolve(dataList);
  391.                 }
  392.  
  393.             };
  394.         })
  395.  
  396.     },
  397.     //查询所有的柜台
  398.     getAllCounter: function (db, storename) {
  399.         var transaction = db.transaction(storename);
  400.         var store = transaction.objectStore(storename);
  401.         var indexs = store.index('counter_index');
  402.         var data = [];
  403.         return new Promise((resolve, reject) => {
  404.             indexs.openCursor().onsuccess = function (e) {
  405.                 var cursor = e.target.result;
  406.                 if (cursor) {
  407.                     //    console.log(cursor.value.counter);
  408.                     data.push(cursor.value.counter);
  409.                     resolve(data);
  410.                     cursor.continue();
  411.                 }
  412.             }
  413.         })
  414.     },
  415.     getdata: function (db, storename) {
  416.         var objectStore = db.transaction(storename).objectStore(storename);
  417.         var data = [];
  418.         return new Promise((resolve, reject) => {
  419.             objectStore.openCursor().onsuccess = function (event) {
  420.                 var cursor = event.target.result;
  421.                 if (cursor) {
  422.                     data.push(cursor.value)
  423.  
  424.                     resolve(data)
  425.                 }
  426.                 else {
  427.                     reject(false)
  428.                 }
  429.  
  430.             };
  431.         })
  432.     },
  433.     getqtybyqtyindex: function (db, storename) {
  434.         var transaction = db.transaction(storename);
  435.         var store = transaction.objectStore(storename);
  436.         var indexs = store.index('qty_index');
  437.         var sum = ;
  438.         return new Promise((resolve, reject) => {
  439.             indexs.openCursor().onsuccess = function (e) {
  440.                 var cursor = e.target.result;
  441.                 if (cursor) {
  442.                     sum += cursor.value.qty
  443.                     cursor.continue();
  444.                 }
  445.                 else {
  446.                     resolve(sum)
  447.                 }
  448.             }
  449.         })
  450.     }
  451.  
  452. }
  1.  handSumit() {
  2.       if (this.barcode == "") {
  3.         this.$createDialog({
  4.           type: "alert",
  5.           content: "條碼為空",
  6.           confirmBtn: "確定",
  7.           icon: "cubeic-alert"
  8.         }).show();
  9.       } else {
  10.         let that = this;
  11.         let Counter = localStorage.getItem("counter");
  12.         let barcodes = this.barcode;
  13.         let shopDB = null;
  14.         let QTY = parseInt(this.qty);
  15.         let CounterCode = Counter + "-" + barcodes;
  16.         var now = new Date();
  17.         this.addtime = now;
  18.         IndexedDB.openDB(
  19.           "shopDB",
  20.           ,
  21.           shopDB,
  22.           {
  23.             name: "stockTable",
  24.             key: "counterCode"
  25.           },
  26.           function(db) {
  27.             let newQty = "";
  28.             IndexedDB.getqtyBykey(db, "stockTable", CounterCode).then(x => {
  29.               if (x == false) {
  30.                 let shopDB = db;
  31.                 IndexedDB.putDatas(
  32.                   shopDB,
  33.                   "stockTable",
  34.                   [
  35.                     {
  36.                       counterCode: CounterCode,
  37.                       counter: Counter,
  38.                       barcode: barcodes,
  39.                       qty: QTY,
  40.                       addtime: that.addtime
  41.                     }
  42.                   ],
  43.                   function() {
  44.                     that.flag = true;
  45.                     that.getdata();
  46.                     that.serchbyArecode();
  47.                   }
  48.                 );
  49.               } else {
  50.                 let newCounter = x.counter;
  51.                 if (newCounter == Counter) {
  52.                   let oldqty = parseInt(x.qty);
  53.                   let newQty = QTY + oldqty;
  54.  
  55.                   IndexedDB.putDatas(
  56.                     db,
  57.                     "stockTable",
  58.                     [
  59.                       {
  60.                         counterCode: CounterCode,
  61.                         counter: Counter,
  62.                         barcode: barcodes,
  63.                         qty: newQty,
  64.                         addtime: that.addtime
  65.                       }
  66.                     ],
  67.                     function() {
  68.                       that.flag = true;
  69.                       that.getdata();
  70.                       that.serchbyArecode();
  71.                     }
  72.                   );
  73.                 }
  74.               }
  75.             });
  76.           }
  77.         );
  78.         this.barcode = "";
  79.       }
  80.     },

vue中indexDB的应用的更多相关文章

  1. vue中如何不通过路由直接获取url中的参数

    前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...

  2. vue中的重要特性

    一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  3. Vue中comoputed中的数据绑定

    Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...

  4. vue中使用stompjs实现mqtt消息推送通知

    最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...

  5. Vue中应用CORS实现AJAX跨域，及它在 form data 和 request payload 的小坑处理

    基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...

  6. vue中watched属性

    watched属性,vue中的观察属性,可用来监听一个值的变化 默认有两个参数,新值,旧值 data (){ return { currentCity: "深圳" } } watc ...

  7. 七、vue中v-for有时候对页面不会重新渲染，数组变化后如何到渲染页面

      v-for不能进行双向数据绑定,页面渲染完成后,再次更改v-for遍历的数据,js里面打印的数据看到数据值已经更改,但是页面的数据就是没有渲染,这是为什么呢? vue中v-for和angularj ...

  8. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  9. vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...

随机推荐

  1. Hadoop安装教程_集群/分布式配置

    配置集群/分布式环境 集群/分布式模式需要修改 /usr/local/hadoop/etc/hadoop 中的5个配置文件,更多设置项可点击查看官方说明,这里仅设置了正常启动所必须的设置项: slav ...

  2. Oracle数据库入门——sql语句和函数详解

    一.oracle常用数据类型 一.  数据定义语言(ddl) 数据定义语言ddl(data definition language)用于改变数据库结构,包括创建.更改和删除数据库对象. 用于操纵表结构 ...

  3. rx.js 的冷和热观察

    http://cn.rx.js.org/manual/overview.html#h213 https://rxjs-cn.github.io/rxjs5-ultimate-cn/content/ho ...

  4. 新版谷歌浏览器怎么查找和改变编码格式 IT开发人员谷歌的编码格式

    解决方法在最下面,还有可下载的安装包 今天,无意中在解决一个乱码问题,后台是有过判断解决兼容性问题,但是有个别电脑还是有乱码问题,就去想改变下前台的编码格式,突然发现一向好用的谷歌,居然找不到编码格式 ...

  5. eclipse中一个项目引用另一个项目的方法（申明：来源于网络）

    eclipse中一个项目引用另一个项目的方法(申明:来源于网络) 地址:http://blog.csdn.net/a942980741/article/details/39990699

  6. 导航+左侧菜单+tab切换模板

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  7. svn checkout 指定目录（转）

    http://www.uqugu.com/blog/article/svn-checkout-specified-forder/ svn有时只想检出指定目录,对于其他的大文件目录则不想检出,如不想检出 ...

  8. 洛谷1443 马的遍历【bfs】

    题目链接:https://www.luogu.org/problemnew/show/P1443 题意: 给一个n*m的棋盘,马在上面走(规则就是象棋中的规则,详细见代码dx,dy数组定义) 问棋盘上 ...

  9. 洛谷 P1090合并果子【贪心】【优先队列】

    题目描述 在一个果园里,多多已经将所有的果子打了下来,而且按果子的不同种类分成了不同的堆.多多决定把所有的果子合成一堆. 每一次合并,多多可以把两堆果子合并到一起,消耗的体力等于两堆果子的重量之和.可 ...

  10. Java NIO 与 IO之间的区别

    概述 Java NIO提供了与标准IO不同的IO工作方式: Channels and Buffers(通道和缓冲区):标准的IO基于字节流和字符流进行操作的,而NIO是基于通道(Channel)和缓冲 ...