hmtl5 web SQL 和indexDB

前端缓存有cookie,localStorage,sessionStorage,webSQL,indexDB；

cookie:有缺点

localStorage:功能单一

sessionStorage:会话级

webSQL:仅谷歌支持(标准查询语句)

重点-------------------indexDB

IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

数据相关操作直接上代码：

/*web SQL 只有谷歌支持 几乎不用*/
    /*var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
    db.transaction(function (tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique ,log)');
        tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
        tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
    });
    db.transaction(function (tx) {
        tx.executeSql('SELECT * FROM LOGS', [], function (tx,result) {
            var len = result.rows.length, i;
            for (i = 0; i < len; i++) {
                console.log(result.rows.item(i).log);
            }
        }, null);
    });*/

    /**
     * IndexedDB
     * */
    var db;/*数据库对象*/
    var objectStore;/*仓库(表)*/
    /**
     * 创建数据库
     */
    var request = window.indexedDB.open('myIndex', 3);/*该域中的数据库myIndex*/
    request.onerror = function (event) {
        console.log('open database error');
    };
    /**
     * 业务代码
     */
    request.onsuccess = function (event) {
        db = request.result;/*数据库对象*/
        // add();
        // read();
        // update();
        // remove();
        readAll();
        // console.log(db);
    };
    /**
     * 创建表
     */
    request.onupgradeneeded = function (event) {
        db = event.target.result;/*数据库对象*/
        if (!db.objectStoreNames.contains('person')){
            objectStore = db.createObjectStore('person',{keyPath:'id'});/*创建person仓库(表) 主键*/
            // objectStore = db.createObjectStore('person',{autoIncrement:true});/*自动创建主键*/
            objectStore.createIndex('name', 'name', {unique:false});
            objectStore.createIndex('email', 'email', {unique:true});
        }
        console.log(db);
    };
    /**
     * 插入数据
     */
    function add() {
        var request = db.transaction(['person'], 'readwrite')
            .objectStore('person')
            .add({ id: 1, name: '张三', age: 24, email: 'zhangsan@example.com' });
        request.onsuccess = function (event) {
            console.log('数据写入成功');
        };
        request.onerror = function (event) {
            console.log('数据写入失败');
        };
    }
    /**
     * 读取数据
     */
    function read() {
        var transaction = db.transaction(['person']);
        var objectStore = transaction.objectStore('person');
        var request = objectStore.get(1);
        request.onerror = function (event) {
            console.log('事物失败');
        };
        request.onsuccess = function (event) {
            if (request.result) {
                console.log('Name' + request.result.name);
                console.log('Age' + request.result.age);
                console.log('Email' + request.result.email);
            }else{
                console.log('未获得数据记录');
            }
        };
    }

    /**
     * 遍历数据
     */
    function readAll() {
        var objectStore = db.transaction(['person']).objectStore('person');
        objectStore.openCursor().onsuccess = function (event) {
            var cursor = event.target.result;
            if (cursor){
                console.log('Id:' + cursor.key);
                console.log('Name:' + cursor.value.name);
                console.log('Age:' + cursor.value.age);
                console.log('Email:' + cursor.value.email);
            } else {
                console.log('没有更多数据了');
            }
        }
    }

    /**
     * 更新数据
     */
    function update() {
        var request = db.transaction(['person'], 'readwrite')
            .objectStore('person')
            .put({ id: 1, name: '李四', age: 35, email: 'lisi@example.com' });
        request.onsuccess = function (event) {
            console.log('数据更新成功');
        };
        request.onerror = function (event) {
            console.log('数据更新失败');
        };
    }

    /**
     * 删除数据
     */
    function remove()
    {
        var request = db.transaction(['person'], 'readwrite')
            .objectStore('person')
            .delete(1);
        request.onsuccess = function (event) {
            console.log('数据删除成功');
        };
    }