`

indexedDB兼容ff和chrome实例

 
阅读更多
http://snaketoome.blog.163.com/blog/static/169773401201242121716882 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>IndexedDB</title>
    </head>
    <body >
        <div id="container">
            <label for="txtName">
                Name:
            </label>
            <input type="text" id="txtName" name="txtName" />
            <br />
            <label for="txtEmail">
                Email:
            </label>
            <input type="email" id="txtEmail" name="txtEmail" />
            <br />
            <input type="button" id="btnAdd" value="Add Record" />
            <br />
            <label for="txtID">
                name:
            </label>
            <input type="text" id="txtID" name="txtID" />
            <br />
            <input type="button" id="btnDelete" value="Delete Record" />
              <input type="button" id="btnGet" value="Get Record" />
            <br />
            <input type="button" id="btnPrint" value="Print objectStore" />
            <br />
            <output id="printOutput">
            </output>
        </div>
    </body>
    <script type="text/javascript">
            function kk(){
                window.db='';
                window.storeName='aaa';
                window.dbVersion = '1.0';
                window.dbName='intent_DB';
                initDb();
                contentLoaded();  
            }
            
            function initDb() {

                
                if ('webkitIndexedDB' in window) {
                    window.indexedDB = webkitIndexedDB;
                    window.IDBKeyRange = webkitIDBKeyRange;
                    window.IDBTransaction = window.webkitIDBTransaction;
                }
                else if ('mozIndexedDB' in window) {
                    window.indexedDB = mozIndexedDB;
                }
                else if ('msIndexedDB' in window) {
                    window.indexedDB = msIndexedDB;
                }

                var request = indexedDB.open(dbName); 
                
                request.onsuccess = function (evt) {
                    db = this.result;
                    console.debug(window.db);
                    if(db.version!=dbVersion){
                        var dbReq = db.setVersion(dbVersion);
                        dbReq.onsuccess = function (e) {
                             var that = {result: this.source};
                             onUpg.call(that, e);//把改变版本后的source传递到onUpg
                        };
                    }                                                   
                };
                request.onerror = function (evt) {
                      console.log("IndexedDB error: " + evt.target.errorCode);
                };
                
                request.onupgradeneeded = onUpg
            }
            function contentLoaded() {
                    var btnAdd = document.getElementById("btnAdd");
                    var btnDelete = document.getElementById("btnDelete");
                    var btnPrint = document.getElementById("btnPrint");               
                      var btnGet=document.getElementById('btnGet');
                      
                    btnAdd.onclick=function () {
                        var name = document.getElementById("txtName").value;
                        var sort = document.getElementById("txtEmail").value;
                       
                        var transaction = db.transaction(storeName,IDBTransaction.READ_WRITE);
                        var objectStore = transaction.objectStore(storeName);                   
                        var request = objectStore.add({name: name,sort:sort});
                        request.onsuccess = function (evt) {
                            alert('添加成功');
                        };
                    };
      
                    btnDelete.onclick=function () {
                        var id = document.getElementById("txtID").value;
                        var transaction = db.transaction(storeName, IDBTransaction.READ_WRITE);
                        var objectStore = transaction.objectStore(storeName);
                        var request = objectStore.delete(id);
                        request.onsuccess = function(evt) { 
                             alert('删除成功'); 
                        };
                        request.onerror  = function(evt) { 
                            alert('删除失败');
                        };
                    };
      
                    btnPrint.onclick=function () {
                        var output = document.getElementById("printOutput");
                        output.textContent = "";
                        console.debug(window.db);
                        var transaction = db.transaction(storeName, IDBTransaction.READ_WRITE);
                        var objectStore = transaction.objectStore(storeName);
                        var request = objectStore.openCursor();
                        request.onsuccess = function(evt) { 
                            var cursor = evt.target.result; 
                            if (cursor) { 
                                output.textContent +=  " name: " + cursor.value.name + " email:"+cursor.value.sort;                           
                                cursor.continue(); 
                            } 
                            else { 
                                console.log("No more entries!"); 
                            } 
                           }; 
                    }; 
                    btnGet.onclick=function(){
                        var output = document.getElementById("printOutput");
                        output.textContent = "";
                      
                        var id = document.getElementById("txtID").value;
                        var transaction = db.transaction(storeName, IDBTransaction.READ_WRITE);
                        var objectStore = transaction.objectStore(storeName);
                        var request = objectStore.get(id);
                        request.onsuccess = function(evt) { 
                            var cursor = this.result; 
                                if (cursor) { 
                                    output.textContent +=  " name: " + cursor.name + " email:"+cursor.sort;    
                                }
                        };
                        request.onerror  = function(evt) { 
                            alert('删除失败');
                        };
                       }            
            }
            function onUpg(e){
                var db = this.result;
                var objectStore=db.createObjectStore(storeName, {keyPath: 'name'});
                objectStore.createIndex("sort", "sort", {unique: false });
            }
            kk();
        </script>
    </html>
分享到：
| jquery 动态创建 DIV
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    IndexedDB增删改查插件，分别对增删改查进行了封装，调用对应的函数即可

    在浏览器上有两种数据库：webSQL和IndexedDB。但是如果在浏览器上需要用到数据库一般会使用Indexed DB数据库，webSQL基本上已经废弃了，具体原因小伙伴可以下来自己查查。 IndexedDB 是一种底层 API，用于在客户端...

    indexedDB实例

    - 浏览器兼容性：虽然大部分现代浏览器都支持IndexedDB，但仍有部分老版本浏览器不支持，需要做好兼容性处理。 - 安全与隐私：由于数据存储在本地，开发者应妥善处理敏感信息，避免数据泄露。 - 性能优化：尽管...

    非常简单的indexedDB例子

    总的来说，了解和掌握IndexedDB对于开发现代Web应用至关重要，尤其是在需要离线存储和高性能数据检索的场景下。通过这个简单的例子，你可以深入理解IndexedDB的工作原理，并将其应用到自己的项目中。

    HTML5中indexedDB 数据库的使用实例

    要连接IndexedDB数据库，首先需要调用`indexedDB.open`方法，传入数据库名和版本号。例如： ```javascript var request = indexedDB.open('dbName', 1); ``` 请求对象上的`onsuccess`和`onerror`事件分别用于...

    用于管理您的客户端缓存是IndexedDB微小封装支持版本控制和maxage

    IndexedDB 是一种在浏览器中存储大量结构化数据的低级 API，它提供了索引和查询功能，非常适合客户端缓存。这个名为 "money-clip" 的项目似乎是一个针对 IndexedDB 的轻量级封装库，旨在简化数据管理和缓存策略，...

    HTML5本地存储——IndexedDB

    与传统的Web存储如Cookie和localStorage相比，IndexedDB提供了更高级别的数据管理能力。Cookie通常用于存储少量信息，而localStorage虽然可以存储更多数据，但不支持索引和复杂的查询操作。 IndexedDB的架构由以下...

    在windows8、Android、IOS上使用indexedDB

    对于Android，IndexedDB同样被内置在Chrome和Firefox等现代浏览器中。Android开发者可以使用WebViews来构建混合应用，或者直接在Web应用中利用IndexedDB进行离线数据存储。需要注意的是，不同的Android浏览器可能有...

    前端存储之indexedDB例子

    与Cookie和localStorage相比，IndexedDB具有更高的存储容量和更强大的查询性能。 ### 2. IndexedDB架构 IndexedDB由以下几个核心组件构成： - **Database（数据库）**：存储数据的容器，每个数据库都有一个唯一的...

    浏览器端indexeddb封装成更简洁易操作的接口

    indexeddb 封装成更简洁易操作的接口" 这个标题表明我们讨论的主题是关于在Web浏览器环境中对IndexedDB数据库进行的一种优化处理，即创建一个用户友好的API，使得开发者能更方便、高效地进行数据存储和管理。...

    indexedDB.js

    前段时间项目需要本地存储聊天数据，使用到indexedDB，经查阅大量文章，终于完成。感觉网上indexedDB的文章不够多，也不够完善，因此把代码分享出来，帮助需要的小伙伴。

    IndexedDB 基本使用.pdf

    IndexedDB 基本使用

    IndexedDB:浏览器里内置的数据库

    IndexedDB是一种异步的、基于键值对的数据库，不同于传统的Web存储（如localStorage和sessionStorage），它提供了更高级别的结构化数据存储能力。这种数据库模型允许开发者创建索引，从而能够快速查询大量数据，这...

    一个超级简单小型的基于promise采用IndexedDB的健值存储

    在这个项目中，我们有一个名为"idb-keyval"的小型库，它使用Promise对IndexedDB进行了封装，使得操作更易于理解和使用。 **1. Promise与异步编程** Promise是JavaScript中的一个核心概念，用于处理异步操作。在idb...

    html5 web IndexedDB通讯录的实现

    这个通信录的实现就是利用IndexedDB进行数据管理和交互的一个实例。 首先，我们需要理解IndexedDB的基本概念。IndexedDB是一个键值对存储系统，其中每个键都对应一个值。值可以是任意JavaScript类型，包括对象。...

    indexeddb-promise:使用Promise封装IndexedDB

    1. 安装npm包// use npmnpm install --save-dev indexeddb-promise// use yarnyarn add --dev indexeddb-promisescript引入IndexedDB 会被注册为一个全局变量。建议链接到一个可以手动更新的指定版本号：[removed]...

    import-export-IndexedDB:从IndexedDB导出并导入另一个IndexedDB的Javascript代码，以便导出所有“ Great Suspender”保存的会话，并将它们导入到另一个扩展的IndexedDB（如果兼容）中，或在先前版本的“ The Great Suspender”中导入

    从IndexedDB导出并导入另一个IndexedDB的Javascript代码，以便导出所有“ Great Suspender”保存的会话，并将它们导入到另一个扩展的IndexedDB（如果兼容）中，或在先前版本的“ The Great Suspender”中导入 ...

    IndexedDB基本使用共22页.pdf.zip

    IndexedDB已被大多数现代浏览器支持，包括Chrome、Firefox、Safari和Edge。但需要注意的是，由于它是客户端存储，因此需要对数据安全和隐私进行妥善管理，防止恶意攻击。 综上所述，"IndexedDB基本使用共22页.pdf....

    ccl_chrome_indexeddb ：（有时是部分的）Python重新实现了在类似Chrome的应用程序中读取IndexedDB数据所涉及的技术

    ccl_chrome_indexeddb 该存储库包含（有时是部分）对Chrome风格应用程序中读取IndexedDB数据所涉及技术的重新实现。 这包括： Swift的减压 级别数据库 V8对象反序列化 闪烁对象反序列化 IndexedDB包装器 博客 在...

    backbonejs框架中indexeddb适配器

    然而，使用IndexedDB也需要注意一些挑战，比如异步操作可能导致的复杂性、兼容性问题（不是所有浏览器都支持IndexedDB），以及数据库管理（如版本升级）等。 总结来说，"backbonejs框架中indexeddb适配器"是一个...

    IndexedDB详细demo

    - **数据库（Database）**：每个IndexedDB实例都是一个独立的数据库，数据库由用户创建并命名。 - **对象存储（Object Store）**：类似于关系数据库中的表，用于存储数据。每个对象存储都有一个唯一的名字，并可以...

Magicbox
Global site tag (gtag.js) - Google Analytics