欢迎来到it培训的黄埔军校——智游教育!

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)