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('删除成功');
  }
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值