IndexedDB的ObjectStore的add和put方法有什么不同

kfepiza2024-03-27 11:38

IndexedDB的ObjectStore的add和put方法有什么不同?

IndexedDB的ObjectStore的add和put方法的主要区别在于它们处理主键冲突的方式和返回值的类型。

  1. 处理主键冲突的方式：
  • add方法用于向对象仓库添加数据。如果尝试添加的数据的主键与对象仓库中已存在的数据的主键相同，add方法会报错，因为它不允许主键重复。
  • put方法既可以用于添加数据，也可以用于更新数据。如果提供的主键在对象仓库中已经存在，那么put方法会更新该主键对应的数据；如果主键不存在，则会添加新的数据。
  1. 返回值的类型：
  • add方法返回的IDBRequest对象的result是数量
  • put 方法返回的IDBRequest对象的result是: 方法在更新数据时，如果指定了主键并且该主键已存在，它会返回被替换（覆盖）的原始值。如果没有指定主键或主键不存在，那么它会像add方法一样添加新数据，但具体的返回值类型也未明确指出。

总的来说，选择使用add还是put方法取决于你的具体需求。如果你需要确保数据的主键唯一性，并且不希望更新已存在的数据，那么应使用add方法。如果你需要能够更新已存在的数据，或者添加新的数据（无论主键是否存在），那么应使用put方法。同时，你也需要注意处理这些方法可能抛出的错误或异常，以确保数据的完整性和一致性。

IndexedDB是一种面向对象的NoSQL数据库，它存储的是JavaScript对象。在IndexedDB中，ObjectStore是用于存储和检索数据的容器。ObjectStore提供了两种方法来添加或更新数据：add和put。

add方法用于向ObjectStore中添加新的数据项。如果ObjectStore中已经存在相同的主键，则add方法会抛出一个错误，表示不能添加重复的数据项。

put方法用于向ObjectStore中添加或更新数据项。如果ObjectStore中已经存在相同的主键，则put方法会更新该数据项的值。如果ObjectStore中不存在相同的主键，则put方法会添加新的数据项。

下面是两个示例，演示了add和put方法的使用：

  1. 使用add方法添加数据项：
javascript 复制代码 
var transaction = db.transaction(["objectStoreName"], "readwrite");
var objectStore = transaction.objectStore("objectStoreName");

var data = { id: 1, name: "John" };
var request = objectStore.add(data);

request.onsuccess = function(event) {
  console.log("Data added successfully");
};

request.onerror = function(event) {
  console.log("Error adding data");
};
  1. 使用put方法添加或更新数据项：
javascript 复制代码 
var transaction = db.transaction(["objectStoreName"], "readwrite");
var objectStore = transaction.objectStore("objectStoreName");

var data = { id: 1, name: "John" };
var request = objectStore.put(data);

request.onsuccess = function(event) {
  console.log("Data added or updated successfully");
};

request.onerror = function(event) {
  console.log("Error adding or updating data");
};

IndexedDB的ObjectStore的add和put方法都是用于在对象仓库中添加或更新数据的方法，但它们在使用和行为上存在一些关键的不同之处。

  1. 主键处理与重复数据：

    • add方法：此方法用于向对象仓库添加新的数据。如果尝试添加具有相同主键的数据，add方法会报错，因为它不允许主键重复。这是确保数据唯一性的重要机制。
    • put方法：与add不同，put方法既可以用于添加新数据，也可以用于更新现有数据。如果提供的键已经存在于数据库中，put方法会用新值替换旧值。如果没有提供键，则会自动生成一个。这意味着put在处理主键重复时不会报错，而是会覆盖旧数据。

  2. 返回值：

  • add方法返回的IDBRequest对象的result是数量
  • put 方法返回的IDBRequest对象的result是: 当使用put方法更新数据时，如果键已经存在，它会返回被替换的旧值。如果键不存在（即添加新数据），则返回undefined。

  1. 使用场景：

    • add方法：当你需要确保数据的唯一性，并且不希望出现主键重复时，应使用add方法。
    • put方法：当你需要灵活地添加新数据或更新现有数据时，put方法更为合适。它提供了更大的灵活性，因为你可以通过提供或不提供键来控制是添加新数据还是更新旧数据。

总结来说，add和put方法在IndexedDB的ObjectStore中各有其用途。add方法主要用于确保数据的唯一性，而put方法则提供了更灵活的添加和更新数据的机制。在选择使用哪个方法时，应根据具体的应用场景和需求来决定。

IndexedDB的模板

IndexedDB的模板1

javascript 复制代码 
// 创建数据库
const request = indexedDB.open('myDatabase', 1);

// 创建对象存储空间
request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });
  objectStore.createIndex('name', 'name', { unique: false });
  objectStore.createIndex('age', 'age', { unique: false });
};

// 打开数据库
request.onsuccess = function(event) {
  const db = event.target.result;
  
  // 添加数据
  const transaction = db.transaction(['myObjectStore'], 'readwrite');
  const objectStore = transaction.objectStore('myObjectStore');
  
  const data = [
    { id: 1, name: 'John', age: 25 },
    { id: 2, name: 'Jane', age: 30 },
    { id: 3, name: 'Bob', age: 35 }
  ];
  
  data.forEach(function(item) {
    objectStore.add(item);
  });
  
  transaction.oncomplete = function() {
    console.log('Data added successfully');
  };
  
  // 查询数据
  const getRequest = objectStore.get(1);
  
  getRequest.onsuccess = function() {
    const result = getRequest.result;
    console.log(result);
  };
  
  // 更新数据
  const updateRequest = objectStore.put({ id: 1, name: 'John Doe', age: 26 });
  
  updateRequest.onsuccess = function() {
    console.log('Data updated successfully');
  };
  
  // 删除数据
  const deleteRequest = objectStore.delete(2);
  
  deleteRequest.onsuccess = function() {
    console.log('Data deleted successfully');
  };
};

request.onerror = function(event) {
  console.log('Error opening database');
};

IndexedDB的模板2

以下是一个使用IndexedDB的基本模板，它包含了创建数据库、对象存储、事务处理以及添加和获取数据的基本步骤。这个模板可以用作你开始使用IndexedDB的起点。

javascript 复制代码 
// 定义数据库名称和版本号
const dbName = 'myDatabase';
const dbVersion = 1;

// 打开数据库
const request = indexedDB.open(dbName, dbVersion);

request.onerror = function(event) {
  console.error('数据库打开失败: ', request.error);
};

request.onsuccess = function(event) {
  const db = request.result;
  console.log('数据库打开成功');
  
  // 创建对象存储（如果不存在）
  if (!db.objectStoreNames.contains('myObjectStore')) {
    db.createObjectStore('myObjectStore', { keyPath: 'id' });
  }
  
  // 你可以在这里执行其他数据库操作，比如添加、获取数据等
  // 例如，添加数据
  addData(db);
};

request.onupgradeneeded = function(event) {
  // 在版本升级时执行的操作
  const db = event.target.result;
  
  // 如果需要创建新的对象存储或者修改现有对象存储，可以在这里进行
  // 例如，删除一个旧的对象存储并创建一个新的
  if (db.objectStoreNames.contains('oldObjectStore')) {
    db.deleteObjectStore('oldObjectStore');
  }
  
  const objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });
  
  // 可以根据需要定义索引
  // objectStore.createIndex('indexName', 'propertyName', { unique: false });
};

// 添加数据的函数
function addData(db) {
  const transaction = db.transaction(['myObjectStore'], 'readwrite');
  const objectStore = transaction.objectStore('myObjectStore');
  
  const data = { id: 1, name: 'John Doe', age: 30 };
  
  const request = objectStore.add(data);
  
  request.onsuccess = function(event) {
    console.log('数据添加成功');
  };
  
  request.onerror = function(event) {
    console.error('数据添加失败: ', request.error);
  };
}

// 获取数据的函数
function getData(db, id) {
  const transaction = db.transaction(['myObjectStore'], 'readonly');
  const objectStore = transaction.objectStore('myObjectStore');
  
  const getRequest = objectStore.get(id);
  
  getRequest.onsuccess = function(event) {
    const data = getRequest.result;
    if (data) {
      console.log('获取到的数据:', data);
    } else {
      console.log('未找到数据');
    }
  };
  
  getRequest.onerror = function(event) {
    console.error('获取数据失败: ', getRequest.error);
  };
}

// 假设数据库已经打开，调用获取数据的函数
// getData(db, 1); // 注意：这个调用应该在数据库成功打开后执行

这个模板展示了如何打开数据库，检查是否存在需要的对象存储，并在需要时创建它。它还提供了添加和获取数据的简单函数。

请注意，实际使用时，你需要在正确的事件处理程序中调用这些函数（例如，在onsuccess回调中调用getData函数）。此外，错误处理（onerror事件）对于确保代码的健壮性至关重要。

还需要注意的是，由于IndexedDB是异步的，因此所有的操作都基于请求和事件。这意味着你需要设置事件监听器来处理操作的结果或错误。

在实际应用中，你可能需要更复杂的逻辑来处理多个事务、批量操作、索引的使用以及错误恢复等。这个模板提供了一个起点，你可以根据自己的需求进行扩展和优化。

相关推荐
black^sugar1 小时前
纯前端实现更新检测
开发语言·前端·javascript
2401_857600952 小时前
SSM 与 Vue 共筑电脑测评系统：精准洞察电脑世界
前端·javascript·vue.js
2401_857600952 小时前
数字时代的医疗挂号变革：SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL2 小时前
vue入门教程：组件透传 Attributes
前端·javascript·vue.js
小白学大数据2 小时前
如何使用Selenium处理JavaScript动态加载的内容？
大数据·javascript·爬虫·selenium·测试工具
2402_857583492 小时前
基于 SSM 框架的 Vue 电脑测评系统：照亮电脑品质之路
前端·javascript·vue.js
java_heartLake3 小时前
Vue3之性能优化
javascript·vue.js·性能优化
Swift社区3 小时前
HarmonyOS 实践 - 设计模式在代码中的作用
javascript
少年姜太公4 小时前
从零开始详解js中的this(下)
前端·javascript·程序员
初遇你时动了情4 小时前
react 项目打包二级目 使用BrowserRouter 解决页面刷新404 找不到路由
前端·javascript·react.js
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04机器人编程怎么入门？05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问07SQL 主从数据库实时备份08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10VSCode插件 —— Cody AI （免费AI助手！）