美文网首页
indexedDB踩坑

indexedDB踩坑

作者: 月下吴刚_c8c7 | 来源:发表于2019-03-25 18:28 被阅读0次
    
    /* eslint-disable */
    let db
    function init(){
        /* 新建或打开数据库 */
    
        // 返回一个 IDBRequest 对象,有以下三种结果
        let request = window.indexedDB.open("myDB");   // 名字,版本,版本必须为整数.新建时默认为1,打开时默认为当前版本,不带版本号时自动打开在最新的
        // 打开数据库成功,新建时走onupgradeneeded线
        request.onsuccess = function () {
            db = request.result;  // 获取数据库对象
            console.log('数据库打开成功---');
    
            // closeDB(db)    // 关闭数据库,之后的增删改查都无效
            // setInterval(addData,3000)
            addData();
            readAll()
            console.log('db.version----',db.version)   // 获取版本号,得到整数
            getByName()
        };
        // 新建或打开失败
        request.onerror = function (e) {
            console.log('数据库打开报错');
        };
        // 新建数据库,或者指定的版本号大于数据库的实际版本号,就会发生数据库升级事件upgradeneeded,不再支持 setVersion()来设置版本号
        // 在此回调中,数据库处于升级状态,不能进行增删改查的操作
        request.onupgradeneeded = function (e) {
           console.log('数据库进入升级---');
            db = e.target.result;
            let myStore;
            if (!db.objectStoreNames.contains('person')) { // 若不存在名为person的表,就新建
                myStore = db.createObjectStore('person', { keyPath: 'xxx' , autoIncrement: true}); // 新增一张叫做person的表格,指定主键名为id
                // myStore = db.createObjectStore( 'person',{ autoIncrement: true }); // 不指定主键,让IndexedDB自动生成一个递增的整数为主键
                myStore.createIndex('name', 'name', { unique: false }); // 建立索引,索引名称、索引所在的属性、配置对象(说明该表中该属性是否包含重复的值)。
                myStore.createIndex('email', 'email', { unique: false });
            }
        }
    }
    
    
    // 向数据库写入数据
    /**
     *事务有三种模式,网上都有,我也把罗列一下
     *只读:readonly,不能修改数据库数据,可以并发执行
     *读写:readwrite,可以进行读写操作
     *版本变更,versionchange
    */
    
    function addData() {
        var request = db.transaction(['person'], 'readwrite')  // 写入数据需要新建一个事务,新建时必须指定表格名称和操作模式("只读"或"读写")
          .objectStore('person') // 获取指定的IDBObjectStore 对象,
          .add({xxx: Date.now(),name: '李四', age: Math.round(Math.random()*10+15), email: 'zhangsan@example.com' });  // 通过表格对象的add()方法,向表格写入一条记录,写入操作是一个异步操作。
    
        // 通过监听连接对象的success事件和error事件,了解是否写入成功
        request.onsuccess = function (event) {
          console.log('数据写入成功');
    
        };
        // 写入数据失败
        request.onerror = function (e) {
          console.log('数据写入失败');
          console.log('e----',e)
        }
    }
    
    
    
     // 遍历表中的数据
     function readAll() {
        let objectStore = db.transaction('person').objectStore('person');
        let num = 0
        objectStore.openCursor().onsuccess = function (event) {  // 新建指针对象的openCursor()方法是一个异步操作,所以要监听success事件。
           var cursor = event.target.result;
           if (cursor) {
            //  console.log('Id: ' + cursor.key);
            //  console.log('Name: ' + cursor.value.name);
            //  console.log('Age: ' + cursor.value.age);
            //  console.log('Email: ' + cursor.value.email);
            num ++
            // console.log('cursor----',cursor)
            cursor.continue();
          } else {
            console.log('没有更多数据了!-----',num);
          }
        };
      }
      // 更新数据
      function update() {
        var request = db.transaction(['person'], 'readwrite')
          .objectStore('person')
          .put({ id: 1, name: '李四', age: 35, email: 'lisi@example.com' });   // put()方法自动更新了主键为1的记录(主键key名为 id)。
    
        request.onsuccess = function (event) {
          console.log('数据更新成功');
        };
    
        request.onerror = function (event) {
          console.log('数据更新失败');
        }
      }
        //  删除数据库中的某条记录
      function remove() {
        var request = db.transaction(['person'], 'readwrite')
          .objectStore('person')
          .delete(1);  // 删除指定主键值的某条记录
    
        request.onsuccess = function (event) {
          console.log('数据删除成功');
        };
      }
      // 根据主键值查询
    function readData() {
      var transaction = db.transaction(['person']);  // 指定要读取的表
      var objectStore = transaction.objectStore('person'); // 获取指定的IDBObjectStore 对象
      var request = objectStore.get(1);  // 读取数据,参数是主键的值。
    
      request.onerror = function(e) {
        console.log('事务失败');
      };
    
      request.onsuccess = function( e) {
         if (request.result) {
           console.log('Name: ' + request.result.name);
           console.log('Age: ' + request.result.age);
           console.log('Email: ' + request.result.email);
         } else {
           console.log('未获得数据记录');
         }
      };
    }
      // 按照索引来查询数据
      function getByName(){
        var transaction = db.transaction(['person'], 'readonly');
        var store = transaction.objectStore('person');
        var index = store.index('name');
        var request = index.get('李四');
    
        request.onsuccess = function (e) {
          var result = e.target.result;
          if (result) {
            console.log('查到结果---',result)
          } else {
            console.log('未查到结果')
          }
        }
      }
    
    
    
      // 关闭数据库,相对于open
      function closeDB(db){
        db.close();
      }
      //删除数据库,name为 open时用的名字
      function deleteDB(name){
        let DBDelRequest = window.indexedDB.deleteDatabase(name);  // 删除指定数据库
        DBDelRequest.onerror = function(e) {
          console.log("删除失败");
        };
        DBDelRequest.onsuccess = function(e) {
          console.log("删除成功");
          console.log(e.result); // 删除成功后得到 undefined
        };
    
      }
    
    
    
    
    
    
    
    
    
    
      init()
      // addData();
    //   readData();
    // readAll();
    // update();
    // remove();
    //  deleteDB('myDB')  // 删除指定数据库
    
    
    
    
    
    
    
    
    
    
    
    // Object.assign可以deepclone
    // let xx = {
    //     index: 3,
    //     name: 'fsdfsf',
    //     other:{
    //         aaa: 222,
    //         bbb:{
    //             aa:9090,
    //             bb:function(){
    //                 console.log('运行-----------')
    //             }
    //         }
    //     }
    // }
    // let yy = {
    //     index:55
    // }
    // yy = Object.assign({},xx)
    // yy.other.bbb.bb()
    
    

    相关文章

      网友评论

          本文标题:indexedDB踩坑

          本文链接:https://www.haomeiwen.com/subject/srwbvqtx.html