vue indexedDB的使用

vue indexedDB的使用

 

    import Idb from 'idb-js'  //  引入Idb
    import db_student_config from './db_student_config' // 引入數據庫配置
        methods: {
            
            getdev() {
                   Idb(db_student_config).then(devInfo => {
                       
                        // 樹形接口數據插入
                        devInfo.insert({
                            tableName: "park",
                            data: [       
                                { id: 1,  tree: info },
                                { id: 2,  maxid: id },
                            ] 
                        });
                        // 矩形框篩選用經緯度插入
                        devInfo.insert({
                           tableName: "lnglat",
                           data: this.deviceLngLat
                        });
                        // 將deviceIds表中，主鍵值為1的數據查詢出來
                        devInfo.query({
                            tableName: "park",
                            condition: (item)=> { return item.id == 1},
                               success: data => {
                                  console.log(data)//查詢結果打印
                               }
                         });
                    })
            },
        }


//  db_student_config.js  數據庫配置
// in db_student_config.js

export default {
  dbName: 'devInfo', // 數據庫名稱
  version: 1, // 數據庫版本號（默認為當前時間戳）
  tables: [ // 數據庫的表，即ObjectStore
    {
      tableName: 'park', // 樹形結構表
      option: { keyPath: 'id' }, // 表配置，即ObjectStore配置，此處指明主鍵為id
      indexs: [ // 數據庫索引（建議加上索引）
        {
          key: 'id', //  索引名
          option: { // 索引配置，此處表示該字段不允許重復
            unique: true
          }
        },
        {
          key: 'tree'
        }
      ]
    }
  ]
}