html5本地存储数据库,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演示

pc端偶尔会因为代码仓库的原因出现莫名bug，方便的话可以clone源码

地址在这里：git@git.oschina.net:huangxizhou/indexDB.git

最后祝大家新年快乐！！！