关于IndexedDB的操作文档

IndexedDB是一种客户端NoSQL数据库,它可以在JavaScript中使用键值对存储和检索数据。

## 创建数据库和存储对象 在使用IndexedDB之前,需要先创建一个数据库和一个存储对象。

可以使用下面的方法来创建:

var request = window.indexedDB.open('mydb', 1); //创建数据库

request.onerror = function(event) {

        console.log('Database error: ' + event.target.errorCode); //发生错误

};

request.onupgradeneeded = function(event) {

        var db = event.target.result;

        var objectStore = db.createObjectStore('users', { keyPath: 'id' }); //创建存储对象

};

request.onsuccess = function(event) { var db = event.target.result; };

在这个示例中,我们使用indexedDB.open方法创建了名为mydb的数据库。

在数据库版本号为1的情况下,我们在onupgradeneeded事件中使用createObjectStore方法创建了名为users的存储对象,并使用id字段作为主键。

## 添加数据 可以使用以下方法向存储对象中添加数据:

var transaction = db.transaction(['users'], 'readwrite'); //开启事务

var objectStore = transaction.objectStore('users'); //指定操作存储对象

var request = objectStore.add({ id: 1, name: 'Tom', age: 25 }); //添加数据

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

request.onerror = function(event) { console.log('Data not added: ' + event.target.errorCode); };


在这个示例中,我们使用add方法将一条包含id、name和age字段的数据添加到名为users的存储对象中。

## 更新数据 可以使用以下方法来更新存储对象中的数据:


 

var transaction = db.transaction(['users'], 'readwrite'); //开启事务

var objectStore = transaction.objectStore('users'); //指定操作存储对象

var request = objectStore.put({ id: 1, name: 'Tom', age: 30 }); //更新数据

request.onsuccess = function(event) { console.log('Data updated.'); };

request.onerror = function(event) { console.log('Data not updated: ' + event.target.errorCode); }; 

在这个示例中,我们使用put方法将一条包含id、name和age字段的数据更新到名为users的存储对象中。

## 删除数据 可以使用以下方法来从存储对象中删除数据:

var transaction = db.transaction(['users'], 'readwrite'); //开启事务

var objectStore = transaction.objectStore('users'); //指定操作存储对象

var request = objectStore.delete(1); //删除数据

request.onsuccess = function(event) { console.log('Data deleted.'); };

request.onerror = function(event) { console.log('Data not deleted: ' + event.target.errorCode); };


在这个示例中,我们使用delete方法从名为users的存储对象中删除了id为1的数据。

## 查询数据 可以使用以下方法从存储对象中查询数据:

var transaction = db.transaction(['users'], 'readonly'); //开启只读事务

var objectStore = transaction.objectStore('users'); //指定操作存储对象

var request = objectStore.get(1); //查询数据

request.onsuccess = function(event) {

         var data = event.target.result;

if (data) { console.log(data.id + ' ' + data.name + ' ' + data.age); } };
request.onerror = function(event) { console.log('Data not found: ' + event.target.errorCode); };

在这个示例中,我们使用get方法从名为users的存储对象中查询了id为1的数据,并输出了查询结果。 以上就是IndexedDB的基本操作。需要注意的是,IndexedDB是一种较新的技术,可能不兼容一些旧的浏览器,需要进行兼容性检查。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
IndexedDB是一种浏览器本地存储技术,可以用于存储大量的数据,包括二进制数据,因此可以用来存储three.js加载的模型文件。 在Vue中使用IndexedDB可以使用IndexedDB API进行操作,具体步骤如下: 1. 创建一个IndexedDB数据库 ```javascript let request = indexedDB.open('myDB', 1); request.onerror = function() { console.log('创建数据库失败'); }; request.onsuccess = function(event) { console.log('创建数据库成功'); }; request.onupgradeneeded = function(event) { let db = event.target.result; let objectStore = db.createObjectStore('models', { keyPath: 'id' }); }; ``` 这里创建了一个名为"myDB"的数据库,并创建了一个名为"models"的对象仓库,用于存储模型文件。 2. 将模型文件存储到IndexedDB中 ```javascript let db = request.result; let transaction = db.transaction(['models'], 'readwrite'); let objectStore = transaction.objectStore('models'); let fileReader = new FileReader(); fileReader.onload = function() { let model = { id: 'model1', data: fileReader.result }; let request = objectStore.add(model); request.onsuccess = function() { console.log('添加模型成功'); }; }; fileReader.readAsArrayBuffer(modelFile); ``` 这里使用FileReader将模型文件读取为ArrayBuffer类型,然后将其存储到IndexedDB中。 3. 从IndexedDB中获取模型文件 ```javascript let db = request.result; let transaction = db.transaction(['models'], 'readonly'); let objectStore = transaction.objectStore('models'); let request = objectStore.get('model1'); request.onsuccess = function(event) { let model = event.target.result; let arrayBuffer = model.data; // 使用arrayBuffer加载模型文件 }; ``` 这里从IndexedDB中获取id为"model1"的模型文件,并将其存储到arrayBuffer变量中,然后可以使用该arrayBuffer加载模型文件。 注意,IndexedDB在某些浏览器上并不支持,需要进行兼容性处理。另外,IndexedDB API使用起来相对复杂,需要注意事务管理等细节。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值