IndexedDB--HTML5本地存储
什么是IndexedDB
indexedDB是一种轻量级NOSQL数据库，是由浏览器自带。相比Web Sql更加高效，包括索引、事务处理和查询功能。在HTML5本地存储中，IndexedDB存储的数据是最多的，不像webStorage的4M，IndexedDB存储空间是无上限且永久的。
为什么要用IndexedDB
因为咱们的大佬W3C不喜欢Web Sql(Sqlite)啊233，大佬都已经放弃了Web Sql，力推IndexedDB
Web Sql API的主要实现者是Chrome、Safari、Opera、Android、IOS、BB。IE和FF都不支持Web Sql API。
IndexedDB由于受到W3C的推崇。浏览器厂商的实现情况要好一些。
注：反正IndexedDB跟Web Sql都是半斤八两
IndexedDB的特点
支持事务、游标、索引等数据库操作
存储空间大
永久存储，删除缓存不干扰IndexedDB
异步性
各大浏览器对IndexedDB的支持情况：
IE10+(亲测IE10跪=.=)
Firefox 10+、Chrome 23+、Opera 15+
iPhone ios8-ios10 safari支持(X5内核不支持)
Android X5内核支持
注：移动端各种坑，在没什么把握之前千万别像我一样作死去弄移动端
IndexedDB常用功能代码演示
由于我是做了一个小Demo，所以暂且用这个Demo的代码，伪代码大家看看就好，后面会附上完整源码地址233
创建数据库
function createdatabase() {
var resource = window.indexedDB.open("managerDB",1);//创建一个名为managerDB的数据库，数量为1
resource.onsuccess = function(event) {
database = resource.result;//让数据库能在任何地方访问
};
resource.onerror = function(event) {//数据库创建失败事件
alert("can't create database,error:" + resource.error);
};
resource.onupgradeneeded = function(event) {//第一次创建数据库新建一张名为managerList的数据表
var db = resource.result;
var objectStore = db.createObjectStore("managerList",{keyPath:"time"});//key为time
};
}onupgradeneeded事件会在数据库版本不同时触发（event.oldVersion 可以获取当前数据库版本），可以用来升级数据库(添加删除数据表),此事件也会在所请求的数据库不存在的时候触发，会自动创建一个空数据库。
存储数据
如果调用put()添加的数据与已存在的数据有相同的key，浏览器会将新数据替换已存在的数据。
function save() {
var contact = new Object();//新建一个对象
var Name = document.getElementById("name").value;
var Time = getSelect();
var Description = document.getElementById("description").value;
if(JTrim(Name) != "" && JTrim(Description) != "") {//JTrim()函数是用于判断输入是否为空值
contact.name = Name;
contact.time = Time;
contact.description = Description;
var transaction = database.transaction(["managerList"],"readwrite");//读写
var resource = transaction.objectStore("managerList").put(contact);//利用put()将数据存入
} else {
alert("you should write something...");
return;
}
resource.onsuccess = function(event) {//成功
alert("create note success!");
};
resource.onerror = function(event) {//失败
alert("can't create database,error:" + resource.error);//告知错误
};
}JTrim()函数
function JTrim(s) {
return s.replace(/(^\s*)|(\s*$)/g, "");
}遍历全部数据
利用IndexedDB的API来遍历数据的时候，需要用到游标，熟悉数据库的各位应该清楚游标的用法
function loadAll() {
var transaction = database.transaction(["managerList"],"readonly");
var resource = transaction.objectStore("managerList").openCursor();
var str = "";
var result = document.getElementById("container-2");
resource.onsuccess = function(event) {
//创建游标
var cursor = event.target.result;
//利用游标对数据进行遍历
if(cursor) {
var list = cursor.value;
var str += list.time;
cursor.continue();//继续循环
} else {//游标循环到底之后，打印出str
alert(str);//在这里我们就能得出list.time的值了
}
};
resource.onerror = function(event) {//出现错误给出提示
alert("can't create database,error:" + resource.error);
};
}查询单条数据
function search(element) {
var description = element.getAttribute("value");
var transaction = database.transaction(["managerList"], "readonly");//只读
var objectStore = transaction.objectStore("managerList");
var request = objectStore.get(description);//利用get()方法找到这条数据
request.onerror = function(event) {
alert("error:：" + request.error);
};
request.onsuccess = function(event) {
var b = request.result;
alert(b.description);//最终得到这条数据的description部分
};
}删除数据
function del() {
var resource = document.getElementById("container-2");
var b = resource.getElementsByTagName("input");
var div = document.getElementById("container-2");
var result = 0;
for(var i = 0;i < b.length;i ++) {
if(b[i].checked == true) {
var time = b[i].value;
var transaction = database.transaction(["managerList"], "readwrite");//读写
var objectStore = transaction.objectStore("managerList");
var request = objectStore.delete(time);//删除数据的核心就是利用delete方法
request.onerror = function (event) {
alert("error：" + request.error);
};
request.onsuccess = function (event) {
alert("delete note success!");
};
}
}
}删除整个数据库
IndexDB只能在控制台里面删除数据，并不能删除数据表及数据库，所以删除只能代码执行
window.indexedDB.deleteDatabase("数据库名称");DEMO演示
Demo地址(出现bug请移步pc)
pc端偶尔会因为代码仓库的原因出现莫名bug，方便的话可以clone源码
地址在这里：[email protected]:huangxizhou/indexDB.git
最后祝大家新年快乐！！！