IndexedDB(结构化)
nosql类型的数据存储方式
不需要写sql语句
定义
IndexedDB 是一种底层 API,用于在客户端存储大量的结构化数据
应用场景
客户端(浏览器)
大量的数据
结构化数据(类似 object对象 有键有值)
不是关系型(通过sql查询)
存储位置
浏览器中
application中
底层API
操作起来相对复杂
可选择第三方工具
IndexedDB API是强大的,但对于简单的情况可能看起来太复杂。如果你更喜欢一个简单的API,请尝试 localForage、dexie.js、PouchDB、idb、idb-keyval、JsStore 或者 lovefield 之类的库,这些库使 IndexedDB 对开发者来说更加友好。
同源策略
正如大多数的 web 储存解决方案一样,IndexedDB 也遵守同源策略。因此当你在某个域名下操作储存数据的时候,你不能操作其他域名下的数据
事务型数据库系统(ORM)
所有操作 都是通过事务对象(transaction)进行操作
使用
1.打开数据库 -> IDBRequest(请求对象)
open
IDBFactory.open 方法用于打开一个数据库连接。本方法立即返回一个 IDBOpenDBRequest 对象,但打开数据库的操作是异步执行的
连接数据库在一个单独的线程中进行,包括以下几个步骤
指定数据库已经存在时:
等待 versionchange 操作完成。
如果数据库已计划删除,那等着删除完成。
如果已有数据库版本高于给定的 version,中止操作并返回类型为 VersionError 的 DOMError 。
如果已有数据库版本低于给定的 version,触发一个 versionchange 操作。
如果数据库不存在,创建指定名称的数据库,将版本号设置为给定版本,如果给定版本号,则设置为1,and no object stores.
创建数据库连接。
2.获得数据库对象
监听事件获得(注意 打开数据库是异步)
IDBRequest->result属性 数据库对象
upgradeneeded
检测到有新版本的时候触发
第一次打开数据库(如果没有数据库->新建数据库(也可以有多个数据库))
建ObjectStore(DB.createObjectStore("user",{keyPath:"有唯一值的index"});)
建index(os.createIndex("键名","键路径",可选项);)
建index
建index
建ObjectStore(note)
建index(title)
建index(createTime)
建index(content)
success
每一次打开都会调用
error
3.通过数据库对象获得事务对象(db.tansaction())
增删改查
1.获取事务对象
指定权限
2.获取你要操作的OS(objecctStore)
3.增删改查
添加数据add()
let ts = DB.transaction(["hero"],"readwrite");
let os = ts.objectStore("hero");
//会返回一个IDBRequest
let request = os.add(data);
request.onsuccess = ()=>{
console.log("添加数据成功")
loadAll();
}
request.onerror = err=>{console.warn(err)}
查询数据
getAll 查询所有数据(ie不支持)
let os = DB.transaction(["hero"],"readwrite").objectStore("hero");
let request = os.getAll();
request.onsuccess = function (){
console.log(this.result);
let ul = ele(".hero_container");
let liStr = "";
this.result.forEach(item=>{
let li = `<li>
<p>名字:<span>${item.name}</span></p>
<p>血量:<span>${item.blood}</span></p>
<p>攻击:<span>${item.att}</span></p>
</li>`;
liStr+=li;
});
ul.innerHTML = liStr;
}
request.onerror = err=>{console.warn(err)}
get查询指定数据
let os = DB.transaction("hero").objectStore("hero");
//指定要查询的索引及对应的内容
let request = os.index("name").get(searchContent);
request.onsuccess = function () {
console.log(this.result);
}
request.onerror = error=>{console.warn(error)}
删除数据
delete
let content = this.children[0].children[0].textContent;
let os = DB.transaction("hero","readwrite").objectStore("hero");
let request = os.delete(content);
request.onsuccess = ()=>{
console.log("删除成功")
loadAll()
}
request.onerror = err=>{console.warn(err)}
clear
let os = DB.transaction("hero","readwrite").objectStore("hero");
let request = os.clear();
request.onsuccess = ()=>{
console.log("清除成功")
loadAll()
}
request.onerror = err=>{console.log(err)}
注意:
每一次更新objectStore都要清除缓存(或者直接删除数据库)
Uncaught TypeError: Cannot read property 'transaction' of null
at xxx
打开数据库 是异步的->使用DB的时候 还未获得到数据库对象