前端浏览器 IndexDB

最新推荐文章于 2023-07-21 16:17:59 发布

前端忍者（Frontend Ninja）

最新推荐文章于 2023-07-21 16:17:59 发布

阅读量232

点赞数

分类专栏：基础文章标签：大数据 html5 javascript

本文链接：https://blog.csdn.net/weixin_43869192/article/details/125763799

版权

基础专栏收录该内容

37 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <meta content="ie=edge" http-equiv="X-UA-Compatible">
  <title>Document</title>
</head>

<body></body>

</html>
<script>
  // 默认打开的数据库版本为1，我写成1.0就会触发onupgradeneeded事件   
  let request = window.indexedDB.open('index9_test', '1.0');
  let db = null;
  request.onerror = function (event) {
    console.log(new Error(event));
  };
  request.onsuccess = function (event) {
    db = request.result;
    console.log('打开数据库成功:' + event);
    if (db.objectStoreNames.contains('person')) {
      // read(db)     
      // readAll(db)    
      // update(db)   
      // remove(db)      
      findWithIdx(db);
    } else {
      add(db);
    }
  };
  // 如果指定的版本号，大于数据库的实际版本号   
  request.onupgradeneeded = function (event) {
    db = event.target.result;
    console.log('数据库版本升级:' + event);
    let objectStore = null;
    if (!db.objectStoreNames.contains('person')) {
      // autoIncrement: true 自动生成主键, keyPath自定义主键     
      objectStore = db.createObjectStore('person', { keyPath: 'id' });
      // objectStore.createIndex(索引名称, 索引所在的属性, 配置对象{ unique: false 说明该属性是否包含重复的值 })
      objectStore.createIndex('name', 'name', { unique: false });
      objectStore.createIndex('age', 'age', { unique: true });
      objectStore.createIndex('email', 'email', { unique: true });
      console.log(objectStore);
    }
  };

  function add(db) {
    console.log(db);
    // transaction新建事务，新建事务时必须指定是只读还是读写     
    // 通过IDBTransaction.objectStore(name)方法，拿到 IDBObjectStore 对象    
    // 通过表格对象的add()方法，向表格写入一条记录，写入是异步操作，需要监听success和error事件   
    let request = db.transaction(['person'], 'readwrite').objectStore('person').add({
      id: 1,
      name: '张三',
      age: 24,
      email: 'zhangsan@example.com'
    });
    request.onsuccess = function (event) {
      console.log('数据写入成功');
      read();
    };
    request.onerror = function (event) {
      console.log(new Error(event));
    };
  }

  function read() {
    // 读取数据也是通过事务完成     
    var transaction = db.transaction(['person']);
    var objectStore = transaction.objectStore('person');
    var request = objectStore.get(1);
    request.onerror = function (event) {
      console.log('事务失败');
    };
    request.onsuccess = function (event) {
      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 readAll(db) {
    let objectStore = db.transaction('person').objectStore('person');
    // 新建指针对象的openCursor()方法是一个异步操作，所以要监听success事件    
    objectStore.openCursor().onsuccess = function (event) {
      let 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);
        cursor.continue();
      } else {
        console.log('没有更多数据了！');
      }
    };
  }

  function update(db) {
    // 更新数据要使用IDBObject.put()方法   
    var request = db.transaction(['person'], 'readwrite').objectStore('person').put({
      id: 1,
      name: '李四',
      age: 35,
      email: 'lisi@example.com'
    });
    request.onsuccess = function (event) {
      console.log('数据更新成功');
      read(db);
    };
    request.onerror = function (event) {
      console.log('数据更新失败');
    };
  }

  function remove(db) {
    // IDBObjectStore.delete()方法用于删除记录     
    var request = db.transaction(['person'], 'readwrite').objectStore('person').delete(1);
    request.onsuccess = function (event) {
      console.log('数据删除成功');
      read(db);
    };
  }

  function findWithIdx(db) {
    // 根据索引查找   
    let transaction = db.transaction(['person'], 'readonly');
    let store = transaction.objectStore('person');
    let index = store.index('name');
    let request = index.get('李四');
    request.onsuccess = function (e) {
      var result = e.target.result;
      if (result) {
        console.log(result);
      } else {
        console.log('error:', result);
      }
    };
  }
</script>