indexDB 交易和需求

首先我们创建一个makeTX的function。

 function makeTX(storeName, mode) {
    let tx = db.transaction(storeName, mode);
    tx.onerror = (err) => {
      console.warn(err);
    };
    return tx;
  }

然后赋予whiskeyStore读写权限,将whiskey加入到store中。执行成功,回调函数。

  let whiskey = {
      id: uid(),
      name,
      country,
      age,
      owned,
    };

    let tx = makeTX('whiskeyStore', 'readwrite');
    tx.oncomplete = (ev) => {
      console.log(ev);
      //buildList()
    };

    let store = tx.objectStore('whiskeyStore');
    let request = store.add(whiskey);

    request.onsuccess = (ev) => {
      console.log('successfully added an object');
    };
    request.onerror = (err) => {
      console.log('error in request to add');
    };
  });

03-21
### IndexedDB 使用指南 IndexedDB 是一种在客户端存储大量结构化数据的低级 API。它允许开发者通过事务机制访问数据库并执行增删改查操作。相比于已废弃的 Web SQL 数据库,IndexedDB 更加灵活且被广泛推荐使用。 #### 基本概念 IndexedDB 的设计基于对象存储模型,其中每个存储的对象都有一个键值对形式的关键字作为索引。以下是几个重要术语: - **Database (数据库)**:IndexedDB 中的数据容器。 - **Object Store (对象仓库)**:类似于关系型数据库中的表,用于存储一组具有相同模式的数据项。 - **Key Path (键路径)**:定义如何提取对象的主要关键字。 - **Transaction (事务)**:提供隔离性一致性保障的操作单元。 - **Index (索引)**:辅助查询性能提升的一种方式[^2]。 #### 创建打开数据库 创建或打开一个 IndexedDB 数据库通常涉及 `indexedDB.open()` 方法: ```javascript const request = indexedDB.open('myDatabase', 1); request.onerror = function(event) { console.error('Error opening database.'); }; request.onsuccess = function(event) { const db = event.target.result; console.log('Database opened successfully:', db); }; ``` 如果指定版本号大于当前数据库版本,则会触发升级事件,在此期间可以初始化新的对象仓库或其他配置。 #### 添加对象仓库 当首次创建或者更新数据库时,可以通过监听 onupgradeneeded 来设置新特性: ```javascript request.onupgradeneeded = function(event) { const db = event.target.result; if (!db.objectStoreNames.contains('users')) { const objectStore = db.createObjectStore('users', { keyPath: 'id' }); // Create an index to search users by name. objectStore.createIndex('name', 'name', { unique: false }); console.log('Users object store created.'); } }; ``` 上述代码片段展示了如何建立名为 `'users'` 的对象仓库以及按名字检索用户的索引[^3]。 #### 插入数据 向现有对象仓库写入记录非常简单: ```javascript function addData(db, data) { const transaction = db.transaction(['users'], 'readwrite'); const objectStore = transaction.objectStore('users'); const addRequest = objectStore.add(data); addRequest.onsuccess = () => { console.log(`Added user with id ${data.id}`); }; addRequest.onerror = () => { console.error('Failed to add data:', addRequest.error); }; } ``` 这里需要注意的是每次修改都需要在一个有效的事务上下文中完成,并指明权限级别为 readwrite 或 readonly[^4]。 #### 查询数据 利用游标遍历所有匹配条件的结果集是一种常见做法: ```javascript function getAllUsers(db) { const transaction = db.transaction(['users'], 'readonly'); const objectStore = transaction.objectStore('users'); const cursorRequest = objectStore.openCursor(); cursorRequest.onsuccess = function(event) { const cursor = event.target.result; if(cursor){ console.log('User found:', cursor.value); cursor.continue(); }else{ console.log('No more entries!'); } }; } ``` 此外还可以借助特定字段上的索引来加速查找效率[^5]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值