HTML5 基础（003_Indexed Database_2）

理解HTML5的IndexedDB：NoSQL数据库实践

最新推荐文章于 2021-05-30 00:54:50 发布

柯南道尔2606

最新推荐文章于 2021-05-30 00:54:50 发布

阅读量854

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/Google2606/article/details/52496692

html5 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了HTML5的Indexed Database（IndexedDB），一种非关系型的客户端数据存储规范。IndexedDB提供了类似NoSQL的数据操作方式，不依赖SQL。在Chromium浏览器上运行示例代码成功，但在Firefox 48.0版本中遇到'InvalidStateError'错误，可能由于特定版本的限制。在更新的Firefox版本上，示例代码表现正常。欲了解更多详情，可参考IBM开发者网站和W3C官方文档。

Indexed Database：

简称为 IndexedDB，是 Web 客户端存储结构化数据的规范之一，在 2009 年由 Oracle 提出。如果说 Web SQL Databae 在客户端实现了传统的 SQL 数据库操作，那么 Indexed Database 更类似于 NoSQL 的形式来操作数据库，其中最重要的是 Indexed Database 不使用 SQL 作为查询语言。其数据存储可以不需要固定的表格模式，也经常会避免使用 SQL 的 JOIN 操作，并且一般具有水平可扩展性。详细的 Indexed Database 规范可以参考官方网站。

示例代码（IndexedDB 的使用）：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Indexed Database Example</title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
    <div class="container">

        <!-- 文本行 -->
        <div class="row">
            <div class="col-md-12">
                <h1>
                    <p class="text-center">Hello world!</p>
                </h1>
            </div>
        </div>

        <!-- 表格行 -->
        <div class="row">
            <div class="col-md-12">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th><p class="text-center">NO</p></th>
                            <th><p class="text-center">USERNAME</p></th>
                            <th><p class="text-center">PASSWORD</p></th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                    <tfoot>
                        <tr></tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>

    <!-- jQuery库、Bootstrap库引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            // 删除数据库
            window.indexedDB.deleteDatabase("mydb");

            // 数据准备
            const data = [
                            { id: "001", username: "张三", password: "123456"},
                            { id: "002", username: "李四", password: "369369"},
                            { id: "003", username: "王五", password: "123123"}
                         ];

            // 打开数据库
            var msg; // 记录数据条数
            var request = window.indexedDB.open("mydb", 1); // 数据库名，版本
            // 数据存储
            request.onupgradeneeded = function(event) {
                var db = event.target.result;
                var objectStore = db.createObjectStore("users", { keyPath: "id" });
                objectStore.createIndex("username", "username", { unique: false });
                objectStore.createIndex("password", "password", { unique: false });
                objectStore.transaction.oncomplete = function(event) {
                    var userObjectStore = db.transaction("users", "readwrite").objectStore("users");
                    for ( var i in data) {
                        userObjectStore.add(data[i]);
                    }
                };
            };

            // 查询数据
            request.onsuccess = function(event) {
                var db = event.target.result;
                var transaction = db.transaction(["users"]);
                var objectStore = transaction.objectStore("users");

                // 记录条数
                var count = objectStore.count();
                count.onsuccess = function(event) {
                    msg = "<p class='text-center'>查询记录条数: " + event.target.result + "</p>";
                    $("table tfoot tr").append("<td></td><td></td><td>"+msg+"</td>");
                }

                // 使用cursor
                objectStore.openCursor().onsuccess = function(event) {
                    var cursor = event.target.result;
                    if(cursor) {
                        $("table tbody").append("<tr id='"+cursor.value.id+"'>"+
                                "<td>"+cursor.value.id+"</td>"+
                                "<td>"+cursor.value.username+"</td>"+
                                "<td>"+"<div class='col-md-10'>"+cursor.value.password+"</div>"
                                      +"<div class='col-md-2'><p class='text-center'><button type='button' class='btn btn-primary btn-xs'>Delete</button></p></div>"
                                      +"</td>"+
                                "</tr>");
                        cursor.continue();
                    }

                    // 删除操作
                    $("button").click(function(obj) {
                        var objectStore = db.transaction("users", "readwrite").objectStore("users");
                        var del = objectStore.delete($(obj.target).parents("tr")[0].id);
                        del.onsuccess = function(event) {
                            console.log("删除成功！");
                        };
                        $(obj.target).parents("tr").remove();
                        msg = "<p class='text-center'>查询记录条数: " + $("table tbody").children("tr").length + "</p>";
                        $("table tfoot tr td").remove();
                        $("table tfoot tr").append("<td></td><td></td><td>"+msg+"</td>");
                    });
                };
            };
        });     
    </script>
</body>
</html>