vue中indexDB的应用

最新推荐文章于 2024-09-24 18:02:47 发布
最新推荐文章于 2024-09-24 18:02:47 发布
阅读量3.8k 收藏 5
点赞数
原文链接：https://www.cnblogs.com/huanhuan55/p/10095615.html
版权 
// indexedDB.js，浏览器本地数据库操作

export default {
    // indexedDB兼容
    indexedDB: window.indexedDB || window.webkitindexedDB || window.msIndexedDB || mozIndexedDB,
    // 打开数据库
    // 新对象储存空间newStore参数：newStore.name、newStore.key
    // 新增对象存储空间要更改数据库版本
    openDB: function (dbname, version, db, newStore, callback) {
        var version = version || 1;
        var request = this.indexedDB.open(dbname, version);
        request.onerror = function (event) {
            console.log('IndexedDB数据库打开错误');
        };
        request.onsuccess = function (event) {
            db = event.target.result;
            if (callback && (typeof callback === 'function')) {
                callback(db);
            }
        };
        // onupgradeneeded，调用创建新的储存空间
        request.onupgradeneeded = function (event) {
            var db = event.target.result;
            if (newStore) {
                if (!db.objectStoreNames.contains(newStore.name)) {
                    var objectStore = db.createObjectStore(newStore.name, {
                        keyPath: newStore.key,
                    });
                    objectStore.createIndex('counter_index', 'counter', { unique: false });
                    objectStore.createIndex('barcode_index', 'barcode', { unique: false });
                    objectStore.createIndex('qty_index', 'qty', { unique: false });
                    objectStore.createIndex('counter_code', ['counter', 'barcode'], { unique: false });
                }
            }
        };
    },
    // 删除数据库
    deleteDB: function (dbname, callback) {
        var deleteQuest = this.indexedDB.deleteDatabase(dbname);
        deleteQuest.onerror = function () {
            console.log('删除数据库出错');
        };
        deleteQuest.onsuccess = function () {
            if (callback && (typeof callback === 'function')) {
                callback();
            }
        }
    },
    // 关闭数据库
    closeDB: function (dbname) {
        dbname.close();
        console.log('数据库已关闭');
    },
    // 更新旧值,针对输入数量
    putData: function (db, storename, dataArr, callback) {
        let mybarcode = "";
        let QTY = "";
        let key = "";
        let counter = "";
        let barcode = "";
        let addtime = "";
        dataArr.forEach(item => {
            mybarcode = item.barcode;
            QTY = item.qty;
            barcode = item.barcode;
            counter = item.counter;
            key = item.counterCode;
            addtime = item.addtime;

        });
        this.getdatabycursor(db, storename).then(arr => {
            if (arr.length == 0) {
                //console.log("添加")
                var store = db.transaction(storename, 'readwrite').objectStore(storename),
                    request;
                for (var i = 0, len = dataArr.length; i < len; i++) {
                    request = store.put(dataArr[i]);
                    request.onerror = function () {
                        console.error('PUT添加数据报错');
                    };
                    request.onsuccess = function (result) {
                        if (callback && (typeof callback === 'function')) {
                            callback();
                        }
                    };
                }
            }
            else {
                this.read(db, storename, counter, barcode).then(x => {
                    if (x) {
                        //console.log("最新的值是" + QTY)
                        this.updateDataByKey(db, storename, key, QTY, addtime).then(x => {
                            if (callback && (typeof callback === 'function')) {
                                callback();
                            }

                        });

                    }
                    else {
                        //console.log("再次添加")
                        var store = db.transaction(storename, 'readwrite').objectStore(storename),
                            request;
                        for (var i = 0, len = dataArr.length; i < len; i++) {
                            request = store.put(dataArr[i]);
                            request.onerror = function () {
                                console.error('PUT添加数据报错');
                            };
                            request.onsuccess = function (result) {
                                if (callback && (typeof callback === 'function')) {
                                    callback();
                                }
                            };
                        }
                    }
                })
            }
        })
    },
    // 更新旧值
    putDatas: function (db, storename, dataArr, callback) {
        let mybarcode = "";
        let QTY = "";
        let key = "";
        let counter = "";
        let barcode = "";
        let addtime = "";
        dataArr.forEach(item => {
            mybarcode = item.barcode;
            QTY = item.qty;
            key = item.counterCode;
            counter = item.counter;
            barcode = item.barcode;
            addtime = item.addtime;

        });
        this.getdatabycursor(db, storename).then(arr => {
            if (arr.length == 0) {
                //console.log("添加")
                var store = db.transaction(storename, 'readwrite').objectStore(storename),
                    request;
                for (var i = 0, len = dataArr.length; i < len; i++) {
                    request = store.add(dataArr[i]);
                    request.onerror = function () {
                        console.error('PUT添加数据报错');
                    };
                    request.onsuccess = function (result) {
                        if (callback && (typeof callback === 'function')) {
                            callback();
                        }
                    };
                }
            }
            else {
                this.read(db, storename, counter, barcode).then(x => {
                    if (x) {
                        this.updateDataByKeys(db, storename, key, addtime).then(x => {
                            this.getdata(db, storename).then(result => {
                                if (callback && (typeof callback === 'function')) {
                                    callback();
                                }
                            });
                        });

                    }
                    else {
                        //console.log("再次添加")
                        //console.log("当前的值是"+barcode)
                        var store = db.transaction(storename, 'readwrite').objectStore(storename),
                            request;
                        for (var i = 0, len = dataArr.length; i < len; i++) {
                            request = store.add(dataArr[i]);
                            request.onerror = function () {
                                console.error('PUT添加数据报错');
                            };
                            request.onsuccess = function (result) {
                                if (callback && (typeof callback === 'function')) {
                                    callback();
                                }
                            };
                        }

                    }
                })
            }
        })
    },
    //根据key修改数量
    updateDataByKey: function (db, storeName, value, QTY, addtime) {
        var transaction = db.transaction(storeName, 'readwrite');
        var store = transaction.objectStore(storeName);
        var request = store.get(value);
        return new Promise((resolve, reject) => {
            request.onsuccess = function (e) {
                var stocktable = e.target.result;
                if (stocktable) {
                    stocktable.qty = QTY;
                    stocktable.addtime = addtime;
                    resolve(store.put(stocktable));
                }
                else {
                    reject(false);
                }

            };

        })


    },
  
      updateDataBycode: function (db, storeName, value, QTY) {
        var transaction = db.transaction(storeName, 'readwrite');
        var store = transaction.objectStore(storeName);
        var request = store.get(value);
        return new Promise((resolve, reject) => {
            request.onsuccess = function (e) {
                var stocktable = e.target.result;
                if (stocktable) {
                    stocktable.qty = QTY;
                  
                    resolve(store.put(stocktable));
                }
                else {
                    reject(false);
                }

            };

        })


    },
    //根据key修改数量
    updateDataByKeys: function (db, storeName, value, addtime, callback) {
        var transaction = db.transaction(storeName, 'readwrite');
        var store = transaction.objectStore(storeName);
        var request = store.get(value);

        return new Promise((resolve, reject) => {
            //console.log(addtime)
            request.onsuccess = function (e) {
                var stocktable = e.target.result;
                if (stocktable) {
                    stocktable.qty += 1;
                    stocktable.addtime = addtime;
                    resolve(store.put(stocktable));
                }
                else {
                    reject(false);
                }

            };
        })

    },
    // 删除数据
    deleteData: function (db, storename, key, callback) {
        var store = db.transaction(storename, 'readwrite').objectStore(storename);
        store.delete(key);
        if (callback && (typeof callback === 'function')) {
            callback();
        }

    },
    // 清空数据
    clearData: function (db, storename, callback) {
        var store = db.transaction(storename, 'readwrite').objectStore(storename);
        store.clear();
        if (callback && (typeof callback === 'function')) {
            callback();
        }
    },
    // 通过key获取数据
    read: function (db, storeName, counter, barcode) {
        var transaction = db.transaction(storeName);
        var objectStore = transaction.objectStore(storeName);
        var currentdata = [counter, barcode];
        var indexs = objectStore.index('counter_code');
        var request = indexs.openCursor(IDBKeyRange.only(currentdata));
        return new Promise((resolve, reject) => {
            request.onsuccess = function (e) {
                var cursor = e.target.result;
                if (cursor) {
                    resolve(true);
                }
                else {
                    resolve(false);
                }
            }
        })


    },
    // 通过barcode获取数据
    reads: function (db, storeName, values) {
        var transaction = db.transaction(storeName);
        var objectStore = transaction.objectStore(storeName);
        var indexs = objectStore.index('barcode_index');
        var data = [];
        var request = indexs.openCursor(IDBKeyRange.only(values));
        return new Promise((resolve, reject) => {
            request.onsuccess = function (e) {
                var cursor = e.target.result;
                if (cursor) {
                    data.push(cursor.value);
                    // resolve(data);
                    cursor.continue();
                }
                else {
                    resolve(data)
                }
            };
        })

    },
    //根据counter索引查询数据
    getdatabyCounter: function (db, storeName, values) {
        var transaction = db.transaction(storeName);
        var store = transaction.objectStore(storeName);
        var indexs = store.index('counter_index');
        var datas = [];
        var request = indexs.openCursor(IDBKeyRange.only(values))
        return new Promise((resolve, reject) => {
            request.onsuccess = function (e) {
                var cursor = e.target.result;
                if (cursor) {
                    datas.push(cursor.value);
                    cursor.continue();
                }
                else {
                    resolve(datas)
                }
            }
        })


    },
    //根据主键和索引查询
    getAll: function (db, storeName, counter, barcode) {
        var transaction = db.transaction(storeName);
        var objectStore = transaction.objectStore(storeName);
        var counterCode = [counter, barcode];
        var indexs = objectStore.index('counter_code');
        var request = indexs.openCursor(IDBKeyRange.only(counterCode));
        var data = [];
        return new Promise((resolve, reject) => {
            request.onsuccess = function (e) {
                var cursor = e.target.result;
                if (cursor) {
                    data.push(cursor.value);
                    //resolve(data);
                    cursor.continue();
                }
                else {
                    resolve(data)
                }

            }
        })
    },
    //根据key查询数量是否存在
    getqtyBykey: function (db, storeName, key) {
        var transaction = db.transaction(storeName);
        var objectStore = transaction.objectStore(storeName);
        var request = objectStore.get(key);
        request.onerror = function (event) {
            console.log('事务失败');
        };
        return new Promise((resolve, reject) => {
            request.onsuccess = function (event) {
                if (request.result) {
                    //console.log(request.result.qty)
                    resolve(request.result);
                } else {
                    resolve(false);
                }
            };
        })

    },
    // //通过游标遍历数据
    getdatabycursor: function (db, storename) {
        var objectStore = db.transaction(storename).objectStore(storename);
        var dataList = [];
        var i = 0;
        return new Promise((resolve, reject) => {
            objectStore.openCursor().onsuccess = function (event) {
                var cursor = event.target.result;
                if (cursor) {
                    dataList.push(cursor.value)
                    cursor.continue();
                } else {
                    resolve(dataList);
                }

            };
        })

    },
    //查询所有的柜台
    getAllCounter: function (db, storename) {
        var transaction = db.transaction(storename);
        var store = transaction.objectStore(storename);
        var indexs = store.index('counter_index');
        var data = [];
        return new Promise((resolve, reject) => {
            indexs.openCursor().onsuccess = function (e) {
                var cursor = e.target.result;
                if (cursor) {
                    //    console.log(cursor.value.counter);
                    data.push(cursor.value.counter);
                    resolve(data);
                    cursor.continue();
                }
            }
        })
    },
    getdata: function (db, storename) {
        var objectStore = db.transaction(storename).objectStore(storename);
        var data = [];
        return new Promise((resolve, reject) => {
            objectStore.openCursor().onsuccess = function (event) {
                var cursor = event.target.result;
                if (cursor) {
                    data.push(cursor.value)

                    resolve(data)
                }
                else {
                    reject(false)
                }

            };
        })
    },
    getqtybyqtyindex: function (db, storename) {
        var transaction = db.transaction(storename);
        var store = transaction.objectStore(storename);
        var indexs = store.index('qty_index');
        var sum = 0;
        return new Promise((resolve, reject) => {
            indexs.openCursor().onsuccess = function (e) {
                var cursor = e.target.result;
                if (cursor) {
                    sum += cursor.value.qty
                    cursor.continue();
                }
                else {
                    resolve(sum)
                }
            }
        })
    }




}

handSumit() {
      if (this.barcode == "") {
        this.$createDialog({
          type: "alert",
          content: "條碼為空",
          confirmBtn: "確定",
          icon: "cubeic-alert"
        }).show();
      } else {
        let that = this;
        let Counter = localStorage.getItem("counter");
        let barcodes = this.barcode;
        let shopDB = null;
        let QTY = parseInt(this.qty);
        let CounterCode = Counter + "-" + barcodes;
        var now = new Date();
        this.addtime = now;
        IndexedDB.openDB(
          "shopDB",
          1,
          shopDB,
          {
            name: "stockTable",
            key: "counterCode"
          },
          function(db) {
            let newQty = "";
            IndexedDB.getqtyBykey(db, "stockTable", CounterCode).then(x => {
              if (x == false) {
                let shopDB = db;
                IndexedDB.putDatas(
                  shopDB,
                  "stockTable",
                  [
                    {
                      counterCode: CounterCode,
                      counter: Counter,
                      barcode: barcodes,
                      qty: QTY,
                      addtime: that.addtime
                    }
                  ],
                  function() {
                    that.flag = true;
                    that.getdata();
                    that.serchbyArecode();
                  }
                );
              } else {
                let newCounter = x.counter;
                if (newCounter == Counter) {
                  let oldqty = parseInt(x.qty);
                  let newQty = QTY + oldqty;

                  IndexedDB.putDatas(
                    db,
                    "stockTable",
                    [
                      {
                        counterCode: CounterCode,
                        counter: Counter,
                        barcode: barcodes,
                        qty: newQty,
                        addtime: that.addtime
                      }
                    ],
                    function() {
                      that.flag = true;
                      that.getdata();
                      that.serchbyArecode();
                    }
                  );
                }
              }
            });
          }
        );
        this.barcode = "";
      }
    },
shufan209
关注
VUE系列---VUE+indexDB+JSZip+在线预览zip压缩文件(一)
nongshuqiner的博客
03-22 5583
温馨连接提示：vue入门之路篇系列教程： vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（一） vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（二） vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（三） vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（四） vu
Vue进阶之Vue项目实战（三）
qq_34306228的博客
05-23 874
package.json: 图表渲染器(图表组件) 一般负责： 基于数据协议的图表渲染逻辑 渲染逻辑：通用渲染逻辑、特殊渲染逻辑 BarRenderer.vue、LineRenderer.vue，统一在ChartsRenderer.vue中进行分发渲染（在这一层将不同的图表类型差异磨平） 图表的事件处理 图表举例： 创建 ChartsRenderer.vue components ChartsRenderer.vue App.vue 项目中： ChartsDataTransformer.t
Vue使用 IndexDB vue操作IndexDB数据库 Vue操作IndexDB数据库
半只
10-30 2621
原生 IndexDB操作API并不是很方便，可以使用第三方类库，可以极大的减少工作量，调用IndexDB和LocalStore API很像，我这边使用过的是。，数据格式 是和 数据库一样，可以创建多个数据库，数据库里面有多个表。还有删除、查询等更多API不一一演示了，可以进入。在 demoDataBase数据库新增一条数据。支持并不是很好，有内存限制，并且数据过大。查看是否生效，数据已经新增上去了，一共两条。解析和存储性能不是很好，这时候可以使用。都足够了，但是 如果要考虑大数据的话，
vue-idb-仅使用IndexedDB（Dexie.js）或自动创建且可扩展的vuex模块进行列表和大型列表管理-Vue.js开发
05-27
vue-idb基于Dexie的Vuejs索引数据库包装npm install vue-idb --save用法从'vue'导入Vue从'vue-idb'导入VueVue.us vue-idb基于Dexie安装的Vuejs索引数据库包装npm install vue-idb-保存用法从'vue'导入Vue从'vue-idb'导入VueIdb Vue.use（VueIdb）const idb = new VueIdb（{版本：1，数据库：'test'，模式：[{测试： 'id，title，created_at，updated_at'}，{posts：'id，owner'}]}）new Vue（{el：'#app'，idb：idb，render：h => h（App）}）0.2 .0 BUGFIX关于在现有DB UPDATES依赖项上添加架构的BUGFIX＃32 0.1.11 BUGFIX ADD xxxRese
vue使用indexedDB缓存教程
最新发布
m0_56104994的博客
09-24 499
前端采用indexedDB缓存
Vue使用 IndexDB vue操作IndexDB数据库 Vue操作IndexDB数据库_vue indexdb
2301_77033583的博客
04-08 1480
*
indexDB在vue项目中的应用
jimjack2013的博客
03-19 5140
ndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然Web Storage在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。 （1）Indexed DB： 索引数据库，操作简便，目前主流浏览器正努力实现对index DB的支持。 Web SQL Database实际上已经被废弃，...
vue + indexDB 使用记录
jhaglkl的博客
04-26 816
好记性不如烂笔头，仅作记录，如果有疑问欢迎留言，看到会回复的，只是一些个人理解，请勿上升高度。indexDB。
indexDB-基础使用-vue篇
crazy_9586661的博客
09-15 1699
indexDB基础操作
vue_spa3cms3：IndexedDB + Dexie.js + Vue CLI，cms显示应用
02-10
IndexedDB + Dexie.js + Vue CLI，CMS显示应用程序 建立 npm install -g @ vue / cli VUE创建我的项目 cd我的项目 启动服务器 npm npm install-保存dexie 启动服务器 npm运行发球 建立项目，部署 npm运行构建 样本...
Dcode-Editor:h5在线可视编辑器，基于Vue和 ElementUi 拖拉组件生成H5
05-16
Vue 前端主流框架(react,vue,angular)之一,更适合开发灵活度高且复杂的应用 Vuex 主流的react应用状态管理工具，基于redux vue-cli4 基于vue的前端脚手架 Less css预编译语言，轻松编写结构化分明的css Element-Ui ...
webshop:vue2.0 +模拟.js + indexDB
05-01
店铺 这是一个有趣的项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 有关工作原理的详细说明，请查看的和。
vlf+localforage在indexedDb存储数据
wyu_jerry的博客
11-01 699
Vue中使用vlf+localforage在indexedDb存储数据 一、使用vlf+localforage原因 关于localforage 1.改进的离线存储：通过简单的类似localStorage API 的异步存储方式 2.能存储多种数据类型，而不仅仅是字符串 3.在所有主流浏览器中可用 4.若有些浏览器不支持，则有优雅的降级策略：默认IndexedDB、WebSOL、localStorage顺序进行存储数据 5.中文文档地址：https://localforage.docschina.org/#l
VUE+前端数据存储indexDB
liona_koukou的博客
02-28 4735
背景 最近项目中基于需求限制需要使用mineMap地图绘制路段，路段数据有3万+条（大概27.6M），前后端请求一次耗时38s，这么长的基础数据请求时间对任何一个项目来说都是无法接受的。基于此前后端做了以下操作以期解决这个问题： 后端清除不需要的返回字段，处理后数据大小降至18.6M，请求时间缩短至28s 前端寻求浏览器存储大量数据的方案只在第一次打开页面时请求，后续均从浏览器存储中获取数据（indexDB） 路段数据由基础路段和虚拟路段组成，虚拟路段可能会变化，沟通此处需求是否可以变更为只渲染..
vue3 中使用indexDb
dongheng123的博客
06-02 1752
【代码】vue3 中使用indexDb。
关于vue中使用indexDB的总结
李水灵的博客
08-16 3518
老规矩，先挂官网链接 https://www.npmjs.com/package/idb-js 关于indexDB 是什么，用到什么地方我就不再解释，百度多得很，只说我在使用的过程中的一些问题 官网解释： 引入及简单使用 安装： npm install idb-js --save 使用： 第一步：引入db import Idb from 'idb-js' // 引入Idb 第二步：引入数据库配置 import db_student_config from './db_student_con
vue中indexDb缓存使用
weixin_40457514的博客
07-29 2260
indexDb 缓存使用 简介
浏览器数据库indexedDB+vue实现简单的新增、删除和获取数据列表
九段刀客的博客
03-26 3376
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .tips{ position: fixed; right: 0;...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值