浏览器的IndexedDB增删改查

http://www.ruanyifeng.com/blog/2018/07/indexeddb.html

IndexedDBtest.htm内容如下:

<!DOCTYPE html>
<html >
    <head>
        <title></title>
        <script src="js/indexDb.js" type="text/javascript"></script>
        <script type="text/javascript">
            function init() {
                var dbParams = new Object();
                dbParams.db_name = "SISO";
                dbParams.db_version = "2";
                dbParams.db_store_name = "Test";
                dbObject.init(dbParams);
            }
 
            function Tinsert() {
                // 填入初始值
                dbObject.put({ title: "Quarry Memories", author: "Fred", isbn: 123456 }, 1);
                dbObject.put({ title: "Water Buffaloes", author: "Fred", isbn: 234567 }, 2);
                dbObject.put({ title: "Bedrock Nights", author: "Barney", isbn: 345678 }, 3);
            }
 
            function Tselect() {
                dbObject.select(3);
            }
 
            function Tupdate() {
                dbObject.put({ title: "Quarry wu", author: "lex", isbn: 123456 }, 1);
            }
 
            function Tdelete() {
                dbObject.delete(3);
            }
 
            function Tclear() {
                dbObject.clear();
            }
        </script>
    </head>
    <body οnlοad=" init() ">
        <input type="button" value="新增几条数据" οnclick=" Tinsert(); "/>
        <input type="button" value="查找一条记录" οnclick=" Tselect(); "/>
        <input type="button" value="删除一条记录" οnclick=" Tdelete(); "/>
        <input type="button" value="更新一条记录" οnclick=" Tupdate(); "/>
        <input type="button" value="清除所有表数据" οnclick=" Tclear(); "/>
    </body>
</html>

indexDb.js内容如下:

(function(){
    var dbObject = {}; 
    dbObject.init = function(params){
        this.db_name = params.db_name;
        this.db_version = params.db_version;
        this.db_store_name = params.db_store_name;
        if (!window.indexedDB) 
        {
            window.alert("你的浏览器不支持IndexDB,请更换浏览器");
        }
 
        var request = indexedDB.open(this.db_name,this.db_version);
        //打开数据失败
        request.onerror = function(event) 
        { 
            alert("不能打开数据库,错误代码: " + event.target.errorCode);
        };
        request.onupgradeneeded = function(event) 
        {
            this.db = event.target.result; 
            this.db.createObjectStore(dbObject.db_store_name);
        };
        //打开数据库
        request.onsuccess = function(event) 
        {
            //此处采用异步通知. 在使用curd的时候请通过事件触发
            dbObject.db = event.target.result;
        };
    };
    /**
     * 增加和编辑操作 
     */
    dbObject.put = function(params,key)
    {
        //此处须显式声明事物
        var transaction = dbObject.db.transaction(dbObject.db_store_name, "readwrite");
        var store = transaction.objectStore(dbObject.db_store_name);
        var request = store.put(params,key);
        request.onsuccess = function(){
            alert('添加成功');
        };
        request.onerror = function(event){
            console.log(event);
        }
    };
    /**
     * 删除数据 
     */
    dbObject.delete = function(id)
    {
        // dbObject.db.transaction.objectStore is not a function
        request = dbObject.db.transaction(dbObject.db_store_name, "readwrite").objectStore(dbObject.db_store_name).delete(id);
        request.onsuccess = function(){
            alert('删除成功');
        }
    };
 
    /**
     * 查询操作 
     */
    dbObject.select = function(key)
    {
        //第二个参数可以省略
        var transaction = dbObject.db.transaction(dbObject.db_store_name,"readwrite");
        var store = transaction.objectStore(dbObject.db_store_name);
        if(key)
            var request = store.get(key);
        else
            var request = store.getAll();
 
        request.onsuccess = function () {
            console.log(request.result);
        }
    };
    /**
     * 清除整个对象存储(表)
     */
    dbObject.clear = function()
    {
        var request = dbObject.db.transaction(dbObject.db_store_name,"readwrite").objectStore(dbObject.db_store_name).clear();
        request.onsuccess = function(){
            alert('清除成功');
        }
    }; 
    window.dbObject = dbObject;
})();

结果如下:

添加: 浏览器的IndexedDB增删改查

查询：

浏览器的IndexedDB增删改查

更新: 浏览器的IndexedDB增删改查

浏览器的IndexedDB增删改查

相关推荐