indexedDB兼容ff和chrome实例

最新推荐文章于 2023-09-02 23:32:55 发布

不净之心

最新推荐文章于 2023-09-02 23:32:55 发布

阅读量178

点赞数

分类专栏：工具软件文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/pyzheng/article/details/84475341

版权

工具软件专栏收录该内容

154 篇文章 1 订阅

订阅专栏

[url]http://snaketoome.blog.163.com/blog/static/169773401201242121716882[/url]

<!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>

不净之心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
indexedDB兼容ff和chrome实例

[url]http://snaketoome.blog.163.com/blog/static/169773401201242121716882[/url][code="html"] IndexedDB Name: ...
复制链接

扫一扫