前言
现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。
IndexDB是什么?
IndexedDB是浏览器提供的本地数据库，它可以被网页脚本创建和操作。
IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。
CC_DB是什么?
CC_DB是一款个人对indexedDB的二次封装的前端数据库框架。
为什么用?
一、简洁的数据库操作语句；
二、高效的数据库操作性能；
三、让开发人员把精力都放在业务上,其它的由CC_DB来做。
使用方法:
一、安装
在vue项目的index.html文件中引入:
<script src="https://sysytest.oss-cn-beijing.aliyuncs.com/package/ccDB/ccdb0.1.min.js"></script>
二、使用指南
1.创建CC_DB实例对象
在成功引入上述的js文件后，CC_DB 构造函数就被挂载到window中了,然后就可以使用这个构造函数new实例对象了。
代码说明如下:
var ccdb = new window.Ccdb()
2.使用实例化对象创建表对象
ccdb.build(
'yourDbName', //数据库名
'yourTableName', // 表名
1, //版本号
{
keyPath:'yourKeyPathName',//表的主键名
autoIncrement:false,//是否自动生成主键
index:[
{
keyName:'yourKeyName',//键名
uniqueName:'yourIndexName',//索引名称
unique:false//是否唯一
}
]
}
)
注意: 数据库名不能使用build, getTableStorage, setTableStorage, close关键字
3.获取表对象
表对象创建完后，将自动挂载到ccdb对象中，就可以直接使用ccdb访问。 yourDbName为创建的数据库名。 yourTableName为创建的表名。
4、插入数据
ccdb.yourDbName.yourTableName.insert({id:5,name:'流氓',sex:2,content:'你好',time:'2020-12-20'}).then((e)=>{
if(e.status==200){
console.log(e)
}
})
ccdb.yourDbName.yourTableName.insert(
{id:5,name:'流氓',sex:2,content:'你好',time:'2020-12-20'},
true //insert 的第二个参数为true 时 , 根据主键判断如果数据存在时更新数据，不存在时插入数据
).then((e)=>{
if(e.status==200){
console.log(e)
}
})
5、删除数据
ccdb.yourDbName.yourTableName.filter({sex:1}).delete().then((e)=>{
if(e.status==200){
console.log(e)
}
})
6、更新数据
ccdb.yourDbName.yourTableName.filter({sex:1}).update({sex:2}).then((e)=>{
if(e.status==200){
console.log(e)
}
})
7.查询数据
(1)、查询对应表的所有数据 (all)
ccdb.yourDbName.yourTableName.all().then((e)=>{
if(e.status==200){
console.log(e)
}
})
(2)、查询第一条数据 (first)
ccdb.yourDbName.yourTableName.first().then((e)=>{
if(e.status==200){
console.log(e)
}
})
(3)、查询最后一条数据（last）
ccdb.yourDbName.yourTableName.last().then((e)=>{
if(e.status==200){
console.log(e)
}
})
(4)、分页查询数据
ccdb.yourDbName.yourTableName.limit(15).offset(0).then((e)=>{
if(e.status==200){
console.log(e)
}
})
(5)、过滤查询数据（filter）
ccdb.yourDbName.yourTableName.filter({id:5}).all().then((e)=>{
if(e.status==200){
console.log(e)
}
})
(6)、模糊过滤查询（filter）
ccdb.yourDbName.yourTableName.filter({
id:{
type:'like',
value:/[0-9]+/ //正则
}
}).all().then((e)=>{
if(e.status==200){
console.log(e)
}
})
(7)、自定义过滤方法查询（filter）
ccdb.yourDbName.yourTableName.filter({
yourKeyName:function(keyValue,item){
//keyValue 为yourKeyName 的值
//item 为遍历到的某条数据
//...您的逻辑判断
return true //返回 true 表示成功匹配此条数据 ，false 表示过滤掉此条数据
}
}).all().then((e)=>{
if(e.status==200){
console.log(e)
}
})
(8)、排序查询（sort）
参数说明：
第一个参数为指定排序的字段
第二个参数为排序的方式 next(升序)、 nextunique (升序去重)、prev (降序)、 prevunique(降序去重)
ccdb.yourDbName.yourTableName.sort('id','next').all().then((e)=>{
if(e.status==200){
console.log(e)
}
})
注意:指定排序的字段必须为主键或索引。 (9)、查询数据条数
ccdb.yourDbName.yourTableName.count().then((e)=>{
if(e.status==200){
console.log(e)
}
})
ccdb.yourDbName.yourTableName.filter({sex:1}).count().then((e)=>{
if(e.status==200){
console.log(e)
}
})
(10)、各个功能组合使用
ccdb.yourDbName.yourTableName.filter({sex:1}).limit(5).offset(0).then((e)=>{
if(e.status==200){
console.log(e)
}
})
ccdb.yourDbName.yourTableName.filter({sex:1}).sort('id','prev').all().then((e)=>{
if(e.status==200){
console.log(e)
}
})
//获取最后一个sex=1的数据
ccdb.yourDbName.yourTableName.filter({sex:1}).last().then((e)=>{
if(e.status==200){
console.log(e)
}
})
