indexeddb-永利国际
于2017-04-07 09:19:25 发表在
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的特点
1.
支持事务、游标、索引等数据库操作
2.
3.
存储空间大
4.
5.
永久存储，删除缓存不干扰indexeddb
6.
7.
异步性
8.
各大浏览器对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演示
(出现bug请移步pc)
