html5 indexDB

最新推荐文章于 2024-05-21 13:49:12 发布

理个以哈呦

最新推荐文章于 2024-05-21 13:49:12 发布

阅读量516

点赞数

分类专栏： HTML5 文章标签： html5

HTML5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>indexDB</title>
    <script type="text/javascript" src="http://www.jeasyuicn.com/cron/jquery.min.js"></script>
    <script type="text/javascript">
        var db = null;
        //兼容火狐和谷歌写法获得indexedDB对象
        if (!window.indexedDB) {
            window.indexedDB = window.mozIndexedDB || window.webkitIndexedDB;
        }
        /**
         * 创建和打开数据库(不存在创建)
         * test:数据库名称
         * 3:数据库的版本号
         * onupgradeneeded:跟新数据库函数，版本号改变后会被调用
         */
        var request = indexedDB.open("test",3);
        request.onupgradeneeded = function(event) {
            alert(event.oldVersion);
            db = request.result;
            if (db.objectStoreNames.contains('books')) {
                db.deleteObjectStore('books');
            }
            /***
             * books:数据表
             * keyPath:主键
             * createIndex:创建索引分别是by_title by_author(在书的数据表中，可以根据书的名字和作者来进行查询)
             * unique: true:过滤重复
             */
            var store = db.createObjectStore("books", {keyPath: "isbn"});
            var titleIndex = store.createIndex("by_title", "title", {unique: true});
            var authorIndex = store.createIndex("by_author", "author");

            /**
             *进行数据插入
             */
            store.put({title: "Quarry Memories", author: "Fred", isbn: 123456,other:"..ceshi...."});
            store.put({title: "Water Buffaloes", author: "Fred", isbn: 234567});
            store.put({title: "Bedrock Nights", author: "Barney", isbn: 3456780000000000000});
        };
        //成功 //异步
        request.onsuccess = function() {
            db = request.result;
        };
        //通过事务、索引获取数据
        function getDatas() {
            /**
             *
             */
            var tx = db.transaction("books", "readonly");
            var store = tx.objectStore("books");
            var index = store.index("by_title");

            var request = index.get("Bedrock Nights");
            request.onsuccess = function() {
                var matching = request.result;
                if (matching !== undefined) {
                    // A match was found.
                    $("#d1").html(matching.isbn+";"+matching.title+";"+matching.author);
                } else {
                    // No match was found.
                    $("#d1").html(123);
                }
            };
        }
        //通过事务、游标、索引获取数据
        function getDatas1() {
            var tx = db.transaction("books", "readonly");
            var store = tx.objectStore("books");
            var index = store.index("by_author");

            var request = index.openCursor(IDBKeyRange.only("Fred"));
            var tmp  = "";
            request.onsuccess = function(event) {
                var cursor = request.result;//也可以写成var cursor = event.target.result;
                if (cursor) {
                    tmp+=cursor.value.isbn+";"+cursor.value.title+";"+cursor.value.author;
                    cursor.continue();
                } else {
                    $("#d1").html('错误...');
                }
                $("#d1").html(tmp);
            };
        }
        function deleteDb() {
            var deleteDbRequest = indexedDB.deleteDatabase('test');
            deleteDbRequest.onsuccess = function (event) {
                alert('success...');
            };
            deleteDbRequest.onerror = function (e) {
                alert('error...');
            };
        }
    </script>
</head>
<body>
<button onclick="getDatas();">获取数据</button><br/>
<button onclick="getDatas1();">获取数据1</button><br/>
<button onclick="deleteDb();">删除数据库</button><br/>
<div id="d1"></div>
</body>
</html>

理个以哈呦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5 indexDB

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>indexDB</title> <script type="text/javascript" src="http://www.jeasyuicn.com/cron/jquery.min.js"></script> <script
复制链接

扫一扫

专栏目录