亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

前端數(shù)據(jù)庫indexedDB的一些操作

來源：糊涂一時(shí)而已 發(fā)布時(shí)間：2019-03-28 14:08:24 閱讀量：1250

 

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <button id="selectBook">查詢數(shù)據(jù)</button>

    <button id="add">添加數(shù)據(jù)</button>

    <button id="getDataByTitle">通過書名查詢數(shù)據(jù)</button>

    <div id="con"></div>

    <script type="text/javascript">

        //判斷瀏覽器是否支持 indexedDB

        if (!window.indexedDB) {

            window.alert("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.")

        }

        var db;//保存數(shù)據(jù)庫信息

        //新創(chuàng)建了一個(gè)數(shù)據(jù)庫，  1：數(shù)據(jù)庫的名稱  2：數(shù)據(jù)庫的版本號(hào)

        var request = indexedDB.open('Book', 3);

        //如果創(chuàng)建成功

        request.onsuccess = function (e) {

            console.log("數(shù)據(jù)庫成功創(chuàng)建！");

            //db = e.target.result;

            //將創(chuàng)建成功的數(shù)據(jù)庫信息保存在 db

            db = request.result;

            console.log(db.name);

            console.log(db.version);

            console.log(db.objectStoreNames);

            //獲取數(shù)據(jù)，渲染到頁面上

            //游標(biāo)

            //事務(wù)

            var oSelectBook = document.getElementById('selectBook');

            var oCon = document.getElementById('con');

            oSelectBook.onclick = function () {

                //事務(wù)  1:表名   2：讀寫方式

                var tx = db.transaction(['books'], 'readwrite');

                //獲取表信息

                var store = tx.objectStore('books');

                //打開游標(biāo),遍歷表中的所有數(shù)據(jù)

                store.openCursor().onsuccess = function (ev) {

                    var cursor = ev.target.result;

                    if (cursor) {

                        var key = cursor.key;

                        var value = cursor.value;

                        console.log('--------游標(biāo)打印出的結(jié)果：--------');

                        console.log(key);

                        console.log(value);

                        oCon.innerHTML += key + '， 書名：' + value.title + '，作者：' + value.author + '<br>';

                        //游標(biāo)向下加一

                        cursor.continue();

                    }

                }

            }

            //通過 書名索引查詢數(shù)據(jù)

            var oGetDataByTitle = document.getElementById('getDataByTitle');

            oGetDataByTitle.onclick = function () {

                //事務(wù)

                var transaction = db.transaction(['books'], "readwrite");

                var store = transaction.objectStore('books');

                //獲取索引

                //console.log(store.index('by_title'));

                var titleIndex = store.index('by_title');

                titleIndex.openCursor().onsuccess = function (ev) {

                    var cursor = ev.target.result;

                    if (cursor) {

                        console.log(cursor.key);

                        console.log(cursor.value);

                        //游標(biāo)更新

                        cursor.continue();

                    }

                }

            }

        }

        //如果創(chuàng)建失敗

        request.onerror = function () {

            console.log("數(shù)據(jù)庫創(chuàng)建失??！");

        }

        //創(chuàng)建表，保存數(shù)據(jù)到表中,

        request.onupgradeneeded = function () {

            console.log("數(shù)據(jù)庫升級(jí)");

            db = request.result;

            //判斷books表是否存在，如果不存在，新創(chuàng)建 該表

            if (!db.objectStoreNames.contains('books')) {  //contains('books') 如果沒找到 返回false

                var store = db.createObjectStore('books', {//創(chuàng)建表

                    keyPath: 'isbn'//表的主鍵

                });

            }

            //增加索引   ,增加查詢的速度

            store.createIndex('by_title', 'title', { unique: true });

            //對(duì)表添加數(shù)據(jù)

            store.put({ isbn: 1, title: "魯迅文集", author: "周樹人", price: 100 });

            store.put({ isbn: 3, title: "魯迅文集1", author: "周樹人1", price: 80 });

            store.put({ isbn: 5, title: "魯迅文集2", author: "周樹人2", price: 50 });

            store.put({ isbn: 9, title: "魯迅文集3", author: "周樹人3", price: 30 });

            //store.put({isbn:9,title:"魯迅文集4",author:"周樹人4",price:30});

        }

        //新增數(shù)據(jù)

        var oAdd = document.getElementById('add');

 

        oAdd.onclick = function () {

            //新增的數(shù)據(jù)

            var bookInfo = { isbn: 11, title: "小叮當(dāng)", author: "周", price: 40 };

            //事務(wù)

            var tx = db.transaction(['books'], 'readwrite');

            var store = tx.objectStore('books');

            var addRes = store.put(bookInfo);//主鍵的內(nèi)容一樣時(shí)，是屬于覆蓋式添加

            //var addRes = store.add(bookInfo);//主鍵內(nèi)容一樣時(shí)，會(huì)報(bào)錯(cuò)

            addRes.onsuccess = function () {

                alert('添加成功');

            }

            addRes.onerror = function () {

                alert('添加失敗');

            }

        }

    </script>

</body>

</html>


標(biāo)簽： PHP 環(huán)境搭建
分享：
評(píng)論：
你還沒有登錄，請(qǐng)先

熱門文章

    推薦文章