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的特点

1. 支持事务、游标、索引等数据库操作

2. 存储空间大

3. 永久存储，删除缓存不干扰IndexedDB

4. 异步性

各大浏览器对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

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