HTML5のIndexedDB

最新推荐文章于 2024-08-21 14:09:37 发布
最新推荐文章于 2024-08-21 14:09:37 发布
阅读量287 收藏
点赞数
分类专栏： 玩转HTML5 文章标签： javascript 数据库 ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DY2019/article/details/50667689
版权

HTML5のIndexedDB

IndexedDB简介

IndexDB属于nosql数据库类型，支持索引，游标

操作步骤

  1. 连接数据库
  2. 触发onsuccess、onerror、onupgradeneeded事件执行业务逻辑
  3. 获取IDBDatabase对象、Transaction对象
  4. [创建ObjectStore对象以及创建索引]（非必须）
  5. [使用游标根据索引查询数据]（非必须）

分段示例

初始化数据

<script type="text/javascript">
    var info = {
        dbName: "GUEST",
        dbVersion: 1,
        storeName: "user",
        optional: {
            keyPath: "userid"
        },
        storeMode: "readwrite",
        storeReadMode: "readonly",
        indexNames: ["usernameIndex", "levelIndex"],
        indexColumns: ["username", "level"],
        indexModes: [{unique: true}, {unique: false}],
        datas: [{
            userid: "1204020305",
            username: "Dudu",
            password: "Dudu",
            level: 1
        }, {
            userid: "1204020306",
            username: "Junniang",
            password: "Junniang",
            level: 2
        }, {
            userid: "1204020307",
            username: "Xiaodong",
            password: "Xiaodong",
            level: 3
        }, {
            userid: "1204020308",
            username: "Liuxin",
            password: "Liuxin",
            level: 4
        }]
    };
</script>

连接数据库

<script type="text/javascript">
window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
function connectionDB() {
    var idb = null;
    var openRequest = window.indexedDB.open(info.dbName, info.dbVersion);
    openRequest.onsuccess = function() {
        idb = openRequest.result;
        console.log("Connection successfully.");
//      addData(idb, info.storeName, info.storeMode, info.datas);
//      displayData(idb, info.storeName, info.storeReadMode);
        displayDataByIndex(idb, info.storeName, info.storeReadMode, info.indexNames[0]);
    }
    openRequest.onerror = function() {
        console.log("Connection failed.");
        return;
    }
    openRequest.onupgradeneeded = function(event) {
        idb = event.target.result;
        // this part will use to debug
//      console.log("Event onupgradeneeded execution.");
//      updateVersion(2, event);
//      createStoreAndIndex(idb, info.storeName, info.optional, info.indexNames, info.indexColumns, info.indexModes);
    }
}
</script>

更新版本信息

<script type="text/javascript">
function updateVersion(version, event) {
    info.version = info.version < version ? version : info.version;
    var oldVersion = event.oldVersion;
    var newVersion = event.newVersion;
    console.log("Version changed, " + oldVersion + " to " + newVersion + ".");
}
</script>

创建objectStore和index

<script type="text/javascript">
function createStoreAndIndex(idb, storeName, optional, indexNames, indexColumns, indexModes) {
    if (typeof idb != "undefined") {
        if (!idb.objectStoreNames.contains(storeName)) {
            var userStore = idb.createObjectStore(storeName, optional);
            for (var i = 0; i < indexNames.length; i++) {
                userStore.createIndex(indexNames[i], indexColumns[i], indexModes[i]);
            }
            console.log("Create object store and index successfully.")
        } else {
            console.log(storeName + " objectStore is existed.");
            return;
        }
    } else {
        console.log("IDBDatabase is undefined.");
        return;
    }
}
</script>

添加数据并展示

<script type="text/javascript">
function addData(idb, storeName, storeMode, datas) {
    if (datas.length == 0) {
        console.log("Datas have no data.");
        return;
    }

    var userStore = null;
    var transaction = null;
    if (typeof idb != "undefined") {
        if (idb.objectStoreNames.contains(storeName)) {
            transaction = idb.transaction([storeName], storeMode);
            transaction.oncomplete = function() {
                console.log("Transaction opened for task addition.");
            }
            transaction.onerror = function() {
                console.log("Transaction not opened due to error. Duplicate items not allowed.");
                return;
            }
            userStore = transaction.objectStore(storeName);
        } else {
            console.log(storeName + " objectStore does not exist.");
            return;
        }
    } else {
        console.log("IDBDatabase is undefined.");
        return;
    }

    for(var i = 0; i < datas.length; i++) {
        var objectStoreRequest = userStore.add(datas[i]);
        objectStoreRequest.onsuccess = function() {
            console.log("item added to database.");
        }
    }
}

function displayData(idb, storeName, storeReadMode) {
    var userStore = null;
    var transaction = null;
    if (typeof idb != "undefined") {
        if (idb.objectStoreNames.contains(storeName)) {
            transaction = idb.transaction([storeName], storeReadMode);
            transaction.oncomplete = function() {
                console.log("Transaction opened for task addition.");
            }
            transaction.onerror = function() {
                console.log("Transaction not opened due to error. Duplicate items not allowed.");
                return;
            }
            userStore = transaction.objectStore(storeName);
        } else {
            console.log(storeName + " objectStore does not exist.");
            return;
        }
    } else {
        console.log("IDBDatabase is undefined.");
        return;
    }
    userStore.openCursor().onsuccess = function(event) {
        var cursor = event.target.result;
        if (cursor) {
            var userObj = cursor.value;
            console.log(
                    userObj.userid + ", " +
                    userObj.username + ", " +
                    userObj.password + ", " + userObj.level);
            cursor.continue();
        } else {
            console.log('Entries all displayed.');
        }
    }
}
</script>

根据索引，使用游标展示数据

<script type="text/javascript">
function displayDataByIndex(idb, storeName, storeReadMode, indexName) {
    var userStore = null;
    var transaction = null;
    if (typeof idb != "undefined") {
        if (idb.objectStoreNames.contains(storeName)) {
            transaction = idb.transaction([storeName], storeReadMode);
            transaction.oncomplete = function() {
                console.log("Transaction opened for task addition.");
            }
            transaction.onerror = function() {
                console.log("Transaction not opened due to error. Duplicate items not allowed.");
                return;
            }
            userStore = transaction.objectStore(storeName);
        } else {
            console.log(storeName + " objectStore does not exist.");
            return;
        }
    } else {
        console.log("IDBDatabase is undefined.");
        return;
    }

    var usernameIndex = userStore.index(indexName);
    usernameIndex.openCursor().onsuccess = function(event) {
        var cursor = event.target.result;
        if (cursor) {
            var userObj = cursor.value;
            console.log(
                    userObj.userid + ", " +
                    userObj.username + ", " +
                    userObj.password + ", " + userObj.level);
            cursor.continue();
        } else {
            console.log('Entries all displayed.');
        }
    }
}
</script>

完整代码

完整Demo如下，测试过程中，将注释代码释放方可调试

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <noscript>Your browser does not support JavaScript pluin</noscript>
    <script type="text/javascript">

        var info = {
            dbName: "GUEST",
            dbVersion: 3,
            storeName: "user",
            optional: {
                keyPath: "userid"
            },
            storeMode: "readwrite",
            storeReadMode: "readonly",
            indexNames: ["usernameIndex", "levelIndex"],
            indexColumns: ["username", "level"],
            indexModes: [{unique: true}, {unique: false}],
            datas: [{
                userid: "1204020305",
                username: "Dudu",
                password: "Dudu",
                level: 1
            }, {
                userid: "1204020306",
                username: "Junniang",
                password: "Junniang",
                level: 2
            }, {
                userid: "1204020307",
                username: "Xiaodong",
                password: "Xiaodong",
                level: 3
            }, {
                userid: "1204020308",
                username: "Liuxin",
                password: "Liuxin",
                level: 4
            }]
        };

        window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
        function connectionDB() {
            var idb = null;
            var openRequest = window.indexedDB.open(info.dbName, info.dbVersion);
            openRequest.onsuccess = function() {
                idb = openRequest.result;
                console.log("Connection successfully.");
//              addData(idb, info.storeName, info.storeMode, info.datas);
//              displayData(idb, info.storeName, info.storeReadMode);
                displayDataByIndex(idb, info.storeName, info.storeReadMode, info.indexNames[0]);
            }
            openRequest.onerror = function() {
                console.log("Connection failed.");
                return;
            }
            openRequest.onupgradeneeded = function(event) {
                idb = event.target.result;
                // this part will use to debug
//              console.log("Event onupgradeneeded execution.");
//              updateVersion(2, event);
//              createStoreAndIndex(
// idb, info.storeName, info.optional, info.indexNames, info.indexColumns, info.indexModes);
            }
        }

        function updateVersion(version, event) {
            info.version = info.version < version ? version : info.version;
            var oldVersion = event.oldVersion;
            var newVersion = event.newVersion;
            console.log("Version changed, " + oldVersion + " to " + newVersion + ".");
        }

        function createStoreAndIndex(idb, storeName, optional, indexNames, indexColumns, indexModes) {
            if (typeof idb != "undefined") {
                if (!idb.objectStoreNames.contains(storeName)) {
                    var userStore = idb.createObjectStore(storeName, optional);
                    for (var i = 0; i < indexNames.length; i++) {
                        userStore.createIndex(indexNames[i], indexColumns[i], indexModes[i]);
                    }
                    console.log("Create object store and index successfully.")
                } else {
                    console.log(storeName + " objectStore is existed.");
                    return;
                }
            } else {
                console.log("IDBDatabase is undefined.");
                return;
            }
        }

        function addData(idb, storeName, storeMode, datas) {
            if (datas.length == 0) {
                console.log("Datas have no data.");
                return;
            }

            var userStore = null;
            var transaction = null;
            if (typeof idb != "undefined") {
                if (idb.objectStoreNames.contains(storeName)) {
                    transaction = idb.transaction([storeName], storeMode);
                    transaction.oncomplete = function() {
                        console.log("Transaction opened for task addition.");
                    }
                    transaction.onerror = function() {
                        console.log("Transaction not opened due to error. Duplicate items not allowed.");
                        return;
                    }
                    userStore = transaction.objectStore(storeName);
                } else {
                    console.log(storeName + " objectStore does not exist.");
                    return;
                }
            } else {
                console.log("IDBDatabase is undefined.");
                return;
            }

            for(var i = 0; i < datas.length; i++) {
                var objectStoreRequest = userStore.add(datas[i]);
                objectStoreRequest.onsuccess = function() {
                    console.log("item added to database.");
                }
            }
        }

        function displayData(idb, storeName, storeReadMode) {
            var userStore = null;
            var transaction = null;
            if (typeof idb != "undefined") {
                if (idb.objectStoreNames.contains(storeName)) {
                    transaction = idb.transaction([storeName], storeReadMode);
                    transaction.oncomplete = function() {
                        console.log("Transaction opened for task addition.");
                    }
                    transaction.onerror = function() {
                        console.log("Transaction not opened due to error. Duplicate items not allowed.");
                        return;
                    }
                    userStore = transaction.objectStore(storeName);
                } else {
                    console.log(storeName + " objectStore does not exist.");
                    return;
                }
            } else {
                console.log("IDBDatabase is undefined.");
                return;
            }
            userStore.openCursor().onsuccess = function(event) {
                var cursor = event.target.result;
                if (cursor) {
                    var userObj = cursor.value;
                    console.log(
                            userObj.userid + ", " +
                            userObj.username + ", " +
                            userObj.password + ", " + userObj.level);
                    cursor.continue();
                } else {
                    console.log('Entries all displayed.');
                }
            }
        }

        function displayDataByIndex(idb, storeName, storeReadMode, indexName) {
            var userStore = null;
            var transaction = null;
            if (typeof idb != "undefined") {
                if (idb.objectStoreNames.contains(storeName)) {
                    transaction = idb.transaction([storeName], storeReadMode);
                    transaction.oncomplete = function() {
                        console.log("Transaction opened for task addition.");
                    }
                    transaction.onerror = function() {
                        console.log("Transaction not opened due to error. Duplicate items not allowed.");
                        return;
                    }
                    userStore = transaction.objectStore(storeName);
                } else {
                    console.log(storeName + " objectStore does not exist.");
                    return;
                }
            } else {
                console.log("IDBDatabase is undefined.");
                return;
            }

            var usernameIndex = userStore.index(indexName);
            usernameIndex.openCursor().onsuccess = function(event) {
                var cursor = event.target.result;
                if (cursor) {
                    var userObj = cursor.value;
                    console.log(
                            userObj.userid + ", " +
                            userObj.username + ", " +
                            userObj.password + ", " + userObj.level);
                    cursor.continue();
                } else {
                    console.log('Entries all displayed.');
                }
            }
        }
    </script>
    <style type="text/css">
        #status {
            width: 600px;
            height: 100px;
            border:#CCDD99 1px solid;
            margin:0 auto;
        }
        #operate {
            text-align: center;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id="status">
        <span id="detail"></span>
    </div>
    <div id="operate">
        <button type="button" onclick="connectionDB()">connection</button>
    </div>
</body>
</html>

联系我

DY2019
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
轩小陌的Python笔记-day09 文件操作相关
hjjqazwsx的博客
03-29 4120
第二模块 函数&模块 第一模块主要是学习python基础知识，从第二模块开始就可以通过程序去解决工作中实际的问题。 第二模块的内容主要包含两大部分： 函数 一个用于专门实现某个功能的代码块（可重用）。 内置函数 len、bin、oct、hex...等 自定义函数 # 定义了一个函数，相当于封装了一个功能代码块 def send_email(): # 写了10行代码，实现了发送邮件。 pass goods = [ {"name": "电脑", "price": 1
butterfly主题修改
weixin_44186409的博客
05-21 6816
butterflt主题 前置 开始我的主题是matery的，经过不断修改又来到了butterfly这个主题。这里省略 node 和 hexo 的安装，直接在初始化博客开始。相关操作请查看之前的博客搭建。 由于目前主题已更新，此文件中部分配置可能失效。请参考作者博客或文档进行。 安裝 在你的博客根目录下： git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly 如果想要安装比较新的
JavaScript の MUI-APP 数据储存方法
weixin_34006468的博客
08-09 193
总结HTML5+的离线本地存储的多种方案: [ √ ] HTML5标准方案：cookie、localstorage、sessionstorage、websql、indexedDB [ √ ] HTML5Plus扩展方案：plus.navigator.setCookie、plus.storage、plus.io 分析: cookie体...
大前端 - 收藏集 - 掘金
weixin_33885676的博客
06-06 254
JS 全栈教程 - 前端 - 掘金本课程是基于阮一峰的 js 全栈教程的视频版本，免费供大家观看... 2016 年 10 个最佳的 CodePen 作品 - 前端 - 掘金说到 CodePen，前端开发者们肯定不会陌生。如果说 Dribbble 是设计师们聚集的圣地，那么 CodePen 则是前端开发者们约“码”的天堂。它不仅提供给你了...
前端使用jspdf生成PDF通过ajax传输后台生成PDF文件
热门推荐
csl125的博客
12-22 2万+
html需要引入 html2canvas.js 和jspdf.debug.js  &lt;script src="static/libs/jsPDF-master/dist/jspdf.min.js"&gt;&lt;/script&gt; &lt;script src="static/libs/jsPDF-master/dist/html2canvas.js"&gt;&lt;/script&g...
你不知道的5个Web技术秘密！
{丸の子}
08-17 143
Eric Bidelman是Google Chrome开发团队里面的一位高级软件工程师，根据多年的Web开发经验，他总结了如何在实际中灵活运用HTML5和CSS3并把内容归纳为5大点。作为一名Web开发人员，这五点你知道吗？你OUT了吗？ 本文围绕如何使用最新的Web技术来进行实际操作，并且在网页中展示最新的最炫的Web效果。毕竟，拥有华丽的外表才会吸引人的关注，没有人会去访问一个无序的，乱...
Javascript底层原理总结
halations的博客
10-22 6257
Javascript底层原理、面试题、算法、浏览器、dom等相关
当我们在浏览器地址栏中输入一个网址会发生什么
banzhihuanyu的博客
01-13 4911
原文见 what happens when 这篇文章旨在尽可能详细的解释一个经典的面试问题“当你在浏览器的地址栏键入’google.com’并按下enter键，会发生什么” 当你在键盘上按下‘g’ 接下来的几节会解释所有有关键盘输入和操作系统中断的东西。但是之后发生的一大堆的事情是没有解释的。当你只是按下了’g’这个键，浏览器就会接收到这个事件，接下来浏览器的自动完成机制就会运行。根据你
HearthBuddy卡牌无法识别
weixin_30292745的博客
07-15 419
界面上无法识别，提示是 [Unidentified card ID :DAL_010][Unidentified card ID :DAL_415] 搜索getcardid，在所有的相关函数处设置断点，看会进入哪里的断点 发现是进入了namespace Triton.Game.Mapping [Attribute38("EntityBase")] public class Entit...
html5 初试 indexedDB(推荐)
09-27
HTML5的IndexedDB是一个离线存储技术，用于在浏览器中存储大量结构化的数据。相比于传统的Web Storage（localStorage和sessionStorage），IndexedDB提供了更强大的数据管理能力，支持索引和复杂的查询操作，适用于...
HTML5本地存储之IndexedDB
09-27
IndexedDB 是 HTML5 提供的一种高级本地存储解决方案，它允许应用程序在用户浏览器中存储大量结构化的数据，包括文件和大对象（blobs）。相比于 Local Storage 和 Session Storage，IndexedDB 提供了更强大的功能，...
深入解析HTML5的IndexedDB索引数据库
09-28
HTML5的IndexedDB索引数据库是一种在客户端存储大量数据的技术，它允许开发者在用户浏览器中存储、操作数据，并加快应用加载速度和提高响应能力。IndexedDB是一个非关系型数据库，它不使用传统的数据表和记录，而是...
HTML5中indexedDB 数据库的使用实例
09-27
HTML5的IndexedDB是一个强大的本地存储机制，它允许在客户端存储大量结构化的数据。相比于Web Storage，IndexedDB更适合处理大规模、复杂的数据结构。在本文中，我们将深入探讨如何使用IndexedDB进行数据操作，包括...
网上商品订单转手系统bootpf
weixin_43213064的博客
08-18 519
【代码】springboot网上商品订单转手系统bootpf
【js】各类前端输入校验方法
最新发布
galaxyJING的博客
08-21 177
【代码】【js】各类前端输入校验方法。
Nuxt3【内置的工具函数】2024最新版
朝阳39的博客
08-20 883
用于在Vue应用程序或API路由中进行HTTP请求，详见。
React学习笔记，从入门到砸门
留白声的博客
08-20 985
react详细自我学习笔记，内容包括JSX、Redux、Router等
【Vue】：利用 vue-drag-resize 拖拽缩放插件，实现对元素的拖拽以及拉伸操作，从而调整元素的宽度和高度
Anislandwhale的博客
08-21 723
“vue-drag-resize” 是一个用于 Vue.js 的插件，它允许你在 Vue 应用中轻松实现可拖拽和可调整大小的元素
vue-indexeddb
09-19
vue-indexeddb是一个用于在Vue.js应用中使用IndexedDB的插件。IndexedDB是一种浏览器内置的数据库，可以在前端进行数据存储和检索操作。使用vue-indexeddb插件，你可以方便地在Vue.js应用中进行IndexedDB的操作，包括创建数据库、创建对象仓库（类似于表）、进行增删改查等。 在使用vue-indexeddb的时候，你需要在Vue实例的配置中指定使用的IndexedDB数据库名称和模式，并在需要使用IndexedDB的组件中引入并使用该插件提供的API进行数据库操作。 下面是一个使用vue-indexeddb的简单示例代码： ```javascript import Vue from 'vue' import VueIndexedDB from 'vue-indexeddb' Vue.use(VueIndexedDB, { version: 1, // 数据库版本号 database: 'test', // 数据库名称 schemas: [ // 数据库模式（对象仓库） { test: 'id, title, created_at, updated_at' }, { posts: 'id, owner' } ] }) new Vue({ el: '#app', render: h => h(App) }) ``` 以上代码中，使用了Vue.use方法来安装vue-indexeddb插件，并在配置中指定了数据库版本号、数据库名称和模式（对象仓库）。然后在Vue实例的配置中引入了vue-indexeddb插件，并在组件中使用插件提供的API进行数据库操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值