indexedDB简单使用

2022-06-27 17:32:28 阅读：177 来源： 互联网

标签：indexedDB function objectStore 简单 transaction 使用 var table event

详细教程

indexedDB使用最简单的方式应该就是，打开indexedDB,在第一次打开数据库的时候创建表，之后获取表对表进行增删改查。创建表的时候最好创建一下keypath

https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var db;//保存数据库
    var transaction//事务，为了保证保存失败的时候可以回滚，或者其他操作
    var objectStore//从事务里面获取表，暂时保存表，这个生命周期很快
    var request = window.indexedDB.open("MyTestDatabase");//开启indexedDB事件
    const datas={
        mydata:'keyOnly',
        obj:{
            a:1,
            b:{
                c:2,
                d:[3,4,5]
            }
        }
    }
    const datas2={
        mydata:'keyOnly2',
        obj:{
            a:1,
            b:{
                c:2,
                d:[3,4,5]
            }
        }
    }

    request.onsuccess = function(event) {
        // Do something with request.result!
        db = event.target.result;
        console.log(this.result)
        console.log("openDb DONE");

    };
    // 该事件仅在较新的浏览器中实现了
    request.onupgradeneeded = function(event) {
        // 保存 IDBDataBase 接口
        db = event.target.result;

           // 为该数据库创建一个对象仓库，只有在这个生命周期中才可以创建数据表
             var objStore =db.createObjectStore("table", { keyPath: "mydata" });

             objStore.add(datas);

    };
    function add(){
        var transaction = db.transaction(["table"], "readwrite");
        // 在所有数据添加完毕后的处理
        transaction.oncomplete = function(event) {
            alert("All done!");
        };

        transaction.onerror = function(event) {
            // 不要忘记错误处理！
        };

         objectStore = transaction.objectStore("table");

        var request = objectStore.add(datas2);//事务生命周期快的很，写好的才能不报错。
        request.onsuccess = function(event) {
            console.log(event.target.result)
        };
    }
    function search(key,table='table'){
        db.transaction("table").objectStore("table").get(key).onsuccess = function(event) {
            console.log( event.target.result);
        };
    }
    function update(value){
         objectStore = db.transaction(["table"], "readwrite").objectStore("table");
        var rqt = objectStore.get("keyOnly2");
        rqt.onsuccess = function(event) {
            // 获取我们想要更新的数据
            var data = event.target.result;

            // 更新你想修改的数据
            data.obj.a = value;

            // 把更新过的对象放回数据库
            var requestUpdate = objectStore.put(data);
            requestUpdate.onerror = function(event) {
                // 错误处理
            };
            requestUpdate.onsuccess = function(event) {
                // 完成，数据已更新！
                console.log('successs')
            };
        };
    }
    function del(key){
        var objectStore = db.transaction(["table"], "readwrite").objectStore("table")
        var rqt = objectStore.delete(key);
        rqt.onsuccess = function(event) {
           console.log('删除成功')
        };

    }
</script>
</body>
</html>

标签：indexedDB,function,objectStore,简单,transaction,使用,var,table,event
来源： https://www.cnblogs.com/xwj-web/p/16416856.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

indexedDB简单使用