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

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

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

  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的addput方法都是用于在对象仓库中添加或更新数据的方法,但它们在使用和行为上存在一些关键的不同之处。

  1. 主键处理与重复数据

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

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

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

总结来说,addput方法在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是异步的,因此所有的操作都基于请求和事件。这意味着你需要设置事件监听器来处理操作的结果或错误。

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

相关推荐
学不会•1 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS2 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜3 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
yqcoder6 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
会发光的猪。7 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客7 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js