html5中的indexDB
一、关系型数据库和非关系型数据库
一致性： 事务完成时，必须让全部的数据具备一致的状态，例如要写入100个数据，前99个成功了，结果第100个不合法，此时事务会回滚到最初状态。这样保证事务结束和开始时候的存储数据处于一致状态。
关系型数据库： 一致性要求高，读写性能低，使用通用sql
非关系型数据库：灵活，key-value的形式，读写性能好，数据结构不固定html
二、事务，ACID特性
事务：指对数据库一个序列上的操做，好比先执行插入，再执行更改，两个操做按顺序执行， 要么都执行，要么都不执行。
ACID特性：
原子性(Atomicity)：事务中的全部操做做为一个总体提交或回滚。
一致性(Consistemcy)：事物完成时，数据必须是一致的，以保证数据的无损。
隔离性(Isolation)：对数据进行修改的多个事务是彼此隔离的。
持久性(Durability)：事务完成以后，它对于系统的影响是永久的，该修改即便出现系统故障也将一直保留。前端
三、数据库中的游标
是处理数据的一种方法，为了查看或者处理结果集中的数据，游标提供了在结果集中一次一行或者多行前进或向后浏览数据的能力(向后或向前浏览数据，结果集能够是表，也能够是索引)sql
四、数据库中锁机制的概念
执行多线程时强制限制资源访问， 好比两个用户同时对数据库进行更改操做，究竟是该执行谁的命令，这时候就有锁的概念.数据库
五、索引
索引是对数据库表中一列或多列的值进行排序的一种结构，使用索引可快速访问数据库表中的特定信息。（在数据库中按照某个字段（或多个）按值排序的一种结构，而后按值查找，主要能实现快速查找和定位）promise
开始学习indexDB
一、indexDB的诞生：
IndexedDB 就是浏览器提供的本地非关系型数据库，它能够被网页脚本建立和操做，容许存储大量数据，提供查找和创建索引等功能浏览器
二、indexDB的特色
一、非关系型数据库（NoSQL）
二、key-value形式存储
三、异步 注意localStorage是同步的
四、支持事务，索引、游标
五、同源限制
六、存储空间大 250M+
七、支持存储二进制
八、提供查找接口和可以创建索引
同源 异步 支持事务 、索引...数据结构
三、基本概念
一、数据库
二、对象仓库 至关于关系型数据库中的表
三、数据记录 至关于表中的每一条记录
四、索引 为了加速数据的检索，能够在对象仓库里面，为不一样的属性创建索引。
五、事务多线程
四、基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#btn,#update,#get{
line-height: 30px;
font-size: 16px;
color: #fff;
background-color: blue;
padding: 0 30px;
}
</style>
</head>
<body>
<button id="btn">添加数据</button>
<button id="update">更新数据</button>
<button id="get">获取数据</button>
<script>
//异步的处理方式是回调，能够用promise改写，也能够写一个发布订阅模式
var indexDB = {
db: null,
dbName: "",
objectStoreList: [],
init: function (dbName, objectStoreList) {
this.dbName = dbName;
this.objectStoreList = objectStoreList.slice(0);
this.openDB(dbName);
},
openDB: function (name, version) {
var _this = this;
version = version ? version : 1;//version不能为0
var request = window.indexedDB.open(name, version);
request.onerror = function (e) {
console.log(e.currentTarget.error.message);
}
request.onsuccess = function (e) {
_this.db = e.target.result;
console.log("DB " + name + " created");
}
request.onupgradeneeded = function (e) {
//建立objectStore（也就是表）
var db = e.target.result;
if (_this.objectStoreList.length != 0){
for(var i = 0; i < _this.objectStoreList.length; i++){
var item = _this.objectStoreList[i];
if (!db.objectStoreNames.contains(item.name)) {
//keyPath 键值 （也就是用哪个字段作键）
var store = db.createObjectStore(item.name, { keyPath: item.keyPath });
//创建索引
if (item.index && item.index.length !== 0){
for (var j = 0; j < item.index.length; j++){
var innerItem = item.index[j];
console.log(innerItem);
store.createIndex(innerItem.name, innerItem.key, innerItem.property);
}
}
}
}
}
console.log('DB version changed to ' + version);
}
},
closeDB: function () {
if (this.db){
this.db.close();
}
},
deleteDB: function (){
if (this.dbName){
window.indexedDB.deleteDatabase(this.dbName);
}
else{
console.log("no such DB");
}
},
//清除某个objectStore的数据
clearObjectStore: function(storeName) {
var transaction = this.db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);
store.clear();
},
deleteObjectStore: function (storeName){
if (db.objectStoreNames.contains(storeName)) {
db.deleteObjectStore(storeName);
}
},
//如下方法为对数据的增删改查
addData: function (storeName, data) {
if (!Array.isArray(data)){
console.error("data must be array");
return;
}
//添加数据须要用到事务
var transaction = this.db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);
for (var i = 0; i < data.length; i++) {
store.add(data[i]);
}
console.log("inserted!");
},
getDataByKey: function(storeName, key, callback) {
var transaction = this.db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);
var request = store.get(key);
var _this = this;
request.onsuccess = function (e) {
var result = e.target.result;
if (typeof callback === "function"){
callback.call(_this, result);
}
};
},
updateDataByKey: function(storeName, key, data) {
var transaction = this.db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);
var _this = this;
var request = store.get(key);
var _this = this;
request.onsuccess = function (e) {
var result = e.target.result;
result = Object.assign(result, data);
store.put(result);
}
console.log("updated!");
},
deleteDataByKey: function (storeName, key) {
var transaction = this.db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);
store.delete(key);
},
//关于索引和游标的使用，须要在建表的时候创建索引
//下面利用index获取数据
//参数: objectStore indexName value(要查找的值) callback
getDataByIndex: function (storeName, indexName, value, callback) {
var transaction = this.db.transaction(storeName);
var store = transaction.objectStore(storeName);
var index = store.index(indexName);
var _this = this;
index.get(value).onsuccess = function (e) {
var result = e.target.result;
if (typeof callback === "function"){
callback.call(_this, result);
}
}
},
//利用游标遍历
getMultipleDataByIndex(storeName, indexName, value, callback) {
var transaction = this.db.transaction(storeName);
var store = transaction.objectStore(storeName);
var index = store.index(indexName);
var request = index.openCursor(IDBKeyRange.only(value))
var values = [], _this = this;
request.onsuccess = function (e) {
var cursor = e.target.result;
if (cursor) {
var value = cursor.value;
//这里是遍历体
values.push(value);
cursor.continue();
}
else{
if (typeof callback === "function") {
callback.call(_this, values);
}
}
}
}
}
var btn = document.getElementById("btn");
indexDB.init("testDB", [
{
name: "students",
keyPath: "id",
//索引信息
index: [
{name: "nameIndex", key: "name", property: {unique: true}},
{ name: "ageIndex", key: "age", property: { unique: false}}
]
},
{
name: "employees",
keyPath: "id",
}
]);//建立一个数据库和多张objectStore(表)。
//添加数据
btn.onclick = function (e) {
var students = [{
id: 1001,
name: "Byron",
age: 24
}, {
id: 1002,
name: "Frank",
age: 30
}, {
id: 1003,
name: "Aaron",
age: 26
}, {
id: 1004,
name: "Aaron2",
age: 26
}];
indexDB.addData("students", students);
}
document.getElementById("get").onclick = function (e) {
indexDB.getDataByKey("students", 1001, function (result) {
// console.log(this.db); this指向indexDB
console.log(result);
});
//经过索引拿数据
//在 索引名为 nameIndex中寻找 "Frank"
//参数: objectStore indexName value(要查找的值) callback
indexDB.getDataByIndex("students", "nameIndex", "Frank", function (result) {
console.log(result);
})
//游标遍历索引
indexDB.getMultipleDataByIndex("students", "ageIndex", 26, function (result) {
//这里能够获取两条数据
console.log(result);
})
}
document.getElementById("update").onclick = function (e) {
indexDB.updateDataByKey("students", 1001, {age: 19});
indexDB.deleteDataByKey("students", 1003);
}
</script>
</body>
</html>
应用场景
前端处理大量结构化的数据异步
相关文章
- 1. html5 indexDB CRD实例
- 2. indexDB
- 3. indexDB的用法
- 4. indexdb使用
- 5. IndexDB 操做util
- 6. indexDB数据库
- 7. IndexDB 入门
- 8. HTML5项目笔记10：使用HTML5 IndexDB设计离线数据库
- 9. IndexDB的基本操做
- 10. 超方便的 IndexDB 库
- 更多相关文章...
- • Spring中Bean的作用域 - Spring教程
- • 现实生活中的 XML - XML 教程
- • C# 中 foreach 遍历的用法
- • Scala 中文乱码解决
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. python的安装和Hello，World编写
- 2. 重磅解读：K8s Cluster Autoscaler模块及对应华为云插件Deep Dive
- 3. 鸿蒙学习笔记2（永不断更）
- 4. static关键字 和构造代码块
- 5. JVM笔记
- 6. 无法启动 C/C++ 语言服务器。IntelliSense 功能将被禁用。错误: Missing binary at c:\Users\MSI-NB\.vscode\extensions\ms-vsc
- 7. 【Hive】Hive返回码状态含义
- 8. Java树形结构递归（以时间换空间）和非递归（以空间换时间）
- 9. 数据预处理---缺失值
- 10. 都要2021年了，现代C++有什么值得我们学习的？
欢迎关注本站公众号,获取更多信息
相关文章
- 1. html5 indexDB CRD实例
- 2. indexDB
- 3. indexDB的用法
- 4. indexdb使用
- 5. IndexDB 操做util
- 6. indexDB数据库
- 7. IndexDB 入门
- 8. HTML5项目笔记10：使用HTML5 IndexDB设计离线数据库
- 9. IndexDB的基本操做
- 10. 超方便的 IndexDB 库