indexedDB 简单使用

IndexedDB 打造靠谱 Web 离线数据库
前端数据库 indexedDB 简介

  • 简单的配置:
//数据库配置
let db = {
	name:"mydb",	//数据库名字
	ver:1,		//数据库版本
}
//数据仓库对象(数据表)
const TableName = 'myObjectStore'
	//暂时没有什么用处;
//模式封装
const Mode = {
	OR:'readonly',//只读模式
}
  • 打开数据库:
//打开数据库				参数:(DbName,DbVer);
let request = indexedDB.open(db.name,db.ver);

//打开数据库:成功事件
request.onsuccess = e =>{
	//获取数据实例;
	let db = e.target.result;	console.log('connection success');
}

//打开数据库:失败事件
request.onerror = e =>{
	console.log('connection faild');
}

//打开数据库:升级事件
request.onupgradeneeded = e =>{
	let db = e.target.result;
	console.log('update...');
}
  • 创建对象仓库(数据表):
    • 在打开数据库成功事件onsuccess 里面续写;
	//获取数据实例;
	let db = e.target.result;	console.log('connection success');
	
	/*参数:(表名{
		//配置, 没有主键&&取消自增 会报错;没有主键&&存在自增,存入数据库的时候,会被会自动添加上;
		keyPath: 'id',		//主键
		autoIncrement: true //是否自增
	})*/
	//创建对象仓库(数据表,数据表的名字每个库必须唯一不可以重复);
	let objectStore = db.createObjectStore(TableName,{
		keyPath: 'id',
		autoIncrement: true
	});
	
	//objectStore 的索引,等效于关系型数据库中的表的字段
	//只能在数据库的 upgradeneeded 事件中处理
	//为对象仓库创建索引;参数(索引名字,Object的属性名[单个或一组...],配置)
	//配置:unique(指定属性的值是否唯一[不可重复的值]),multinEntry:
	// 用于对属性值为数组的数据进行检索,如果为 true,则会检查数组中的每一个值,否则只检查整个数组。
	objectStore.createIndex('name','name',{unique:true});
  • 数据库 CURD:
	//参数:(数据库名字)
   let transaction = db.transaction(db.name,Mode.OR);
   //参数:(数据库表)
   let objectStore = transaction.objectStore(TableName);
	
	//CURD:增删改查的操作;
   /*
		add();
		put();
		get();
		delete();
   */

  //get::获取数据
  let getRequest  = objectStore.get('100001');
  getRequest.onsuccess = e = >{
	  let object = e.target.result;
  }
  //add::添加数据
  let addRequest = objectStore.add({
	  id:'100002',
	  name:'Zhang Fei'
  })
  addRequest.onsuccess = e = >{
	  console.log('添加成功!');
  }
  //put::更新数据
  let putRequest = objectStore.put({
	  id:'100002',
	  name:'Zhang San'
  })
  putRequest.onsuccess = e= >{
	  console.log('更新成功')
  }
  //
  let delRequest = objectStore.delete('100001');
  delRequest.onsuccess = e =>{
	  console.log('删除成功');
  }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
### 回答1: IndexedDB 是一种浏览器内置的 NoSQL 数据库,允许您在浏览器中存储和检索数据。下面是一个基本的 IndexedDB 示例: ```javascript // 打开 IndexedDB 数据库 var request = window.indexedDB.open("myDatabase", 1); // 处理成功和失败事件 request.onerror = function(event) { console.log("Database error: " + event.target.errorCode); }; request.onsuccess = function(event) { console.log("Database opened successfully"); var db = event.target.result; // 添加数据到数据库 var transaction = db.transaction(["customers"], "readwrite"); var objectStore = transaction.objectStore("customers"); var customer = { name: "John", email: "john@example.com" }; var request = objectStore.add(customer); request.onsuccess = function(event) { console.log("Customer added to database"); }; // 从数据库中检索数据 var transaction = db.transaction(["customers"], "readonly"); var objectStore = transaction.objectStore("customers"); var request = objectStore.get(1); request.onerror = function(event) { console.log("Error retrieving customer"); }; request.onsuccess = function(event) { var customer = event.target.result; console.log("Retrieved customer: " + customer.name); }; }; // 创建数据库架构 request.onupgradeneeded = function(event) { var db = event.target.result; var objectStore = db.createObjectStore("customers", { keyPath: "id", autoIncrement: true }); objectStore.createIndex("name", "name", { unique: false }); objectStore.createIndex("email", "email", { unique: true }); }; ``` 这段代码会创建一个名为 "myDatabase" 的 IndexedDB 数据库,其中包含一个名为 "customers" 的对象仓库,用于存储客户数据。该代码还演示了如何向数据库添加数据、从数据库检索数据以及如何创建对象仓库和索引。 ### 回答2: IndexedDB 是一种在 web 浏览器中使用的客户端存储数据库。它可以用于存储大量结构化数据,并且能够在离线状态下进行访问。 一个使用 IndexedDB 的实例可以是一个在线笔记应用。在这个应用中,用户可以创建、编辑和删除笔记。使用 IndexedDB,应用可以将这些笔记存储在本地,以便用户在断网或者关闭浏览器后仍然可以访问。 在这个应用中,首先需要创建一个数据库,用于存储笔记的数据。然后,可以创建一个 object store,用于存储每一条笔记的数据。每一条笔记可以由一个对象表示,其中包含标题、内容和日期等属性。 当用户创建新的笔记时,应用会将该笔记的数据添加到 object store 中。当用户编辑或者删除笔记时,应用会相应地更新或者删除 object store 中对应的数据。 当用户重新打开应用时,可以从 IndexedDB 中获取存储的笔记数据,并在界面上展示出来。用户可以通过界面进行编辑,应用会即时地更新 IndexedDB 中的数据。 除了基本的增删改查操作,IndexedDB 还提供了强大的查询功能。通过使用索引,可以高效地搜索和过滤数据。例如,可以根据标题关键字进行搜索,并返回包含该关键字的所有笔记。 总而言之,IndexedDB 提供了一种方便可靠的方式来在 web 浏览器中存储大量结构化数据。通过使用它,可以实现很多实用的应用,如在线笔记应用等。 ### 回答3: IndexedDB 是 HTML5 标准中的一种客户端数据库,可以在浏览器中存储和操作大量的结构化数据。下面是一个使用 IndexedDB 的示例: 首先,在 JavaScript 中创建一个 IndexedDB 数据库,并指定数据库的名称和版本号: ```javascript let request = indexedDB.open('myDatabase', 1); ``` 然后,在打开数据库成功的回调函数中创建一个对象存储空间(类似于表): ```javascript request.onsuccess = (event) => { let db = event.target.result; let objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' }); }; ``` 现在,可以向对象存储空间中添加数据项: ```javascript request.onsuccess = (event) => { let db = event.target.result; let transaction = db.transaction('myObjectStore', 'readwrite'); let objectStore = transaction.objectStore('myObjectStore'); let data = { id: 1, name: 'John', age: 25 }; let request = objectStore.add(data); request.onsuccess = (event) => { console.log('Data added successfully'); }; request.onerror = (event) => { console.error('Error adding data'); }; }; ``` 还可以使用索引检索数据: ```javascript request.onsuccess = (event) => { let db = event.target.result; let transaction = db.transaction('myObjectStore', 'readonly'); let objectStore = transaction.objectStore('myObjectStore'); let index = objectStore.index('name'); let request = index.get('John'); request.onsuccess = (event) => { let data = event.target.result; console.log(`Name: ${data.name}, Age: ${data.age}`); }; request.onerror = (event) => { console.error('Error retrieving data'); }; }; ``` 此外,还可以更新和删除数据、创建和删除索引等等。这只是一个简单使用 IndexedDB 的示例,实际应用中可以根据需求进行更复杂的操作。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值