Html5 Storage Web SQL 示例

最新推荐文章于 2022-05-13 10:39:34 发布

雾里看花叹朦胧

最新推荐文章于 2022-05-13 10:39:34 发布

阅读量210

点赞数

分类专栏： html5 文章标签： html5 web storage web sql localStorage sessionStorage

本文链接：https://blog.csdn.net/hsl0530hsl/article/details/89740662

版权

html5 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

Web sql 是在浏览器模拟数据库，可以使用JS来操作SQL完成对数据的读写，但是这个东西目前支持的浏览器不多，而且其W3C规范已经停止支持.
支持的浏览器以及版本：

Safari (3.2+)
Chrome (3.0+)
Opera (10.5+)

通常常规的离线应用使用的是webstorage，但是webstorage带有很大的局限性，比如存储空间，domain安全机制等，而WEB SQL 就没有那么多的限制，其有更大的存储空间（可自定义设置），跨域读写，存储结构自由等特点，而且可以方便的使用SQL来进行读写，非常的方便。

示例：

源码的 GitHub 路径如下：https://github.com/slhuang520/study/tree/master/web/html5/base

整个项目目录结构如下：
在这里插入图片描述

具体示例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Web SQL Storage</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .main {
            width: 80%;
            margin: 0 auto;
        }
        .main form {
            margin-top: 10px;
        }
        .form button {
            margin-top: 10px;
        }
    </style>
</head>
<body>

    <div class="main">
        <form class="form-inline">
            <div class="form-group">
                <label for="firstName">First Name:</label>
                <input type="text" id="firstName" class="form-control">
            </div>
            <div class="form-group">
                <label for="lastName">Last Name:</label>
                <input type="text" id="lastName" class="form-control">
            </div>
            <div class="form-group">
                <label for="userName">User Name:</label>
                <input type="text" id="userName" class="form-control">
            </div>
            <button class="btn btn-primary" id="sub">提交</button>
        </form>

        <hr>
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">Data List</div>
            <div class="panel-body">
                <p>Use Web Storage SQL to save data</p>
            </div>

            <!-- Table -->
            <table class="table table-bordered table-hover table-striped table-responsive">
                <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
                </thead>
                <tbody id="body"></tbody>
            </table>
        </div>
    </div>

<script src="bootstrap/js/jquery-2.1.3.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
    <script>
        /**
         * 创建或是获取数据库，有就获取，没有就创建
         * @returns {Database}
         */
        function getDatabase() {
            return openDatabase("demo", "1.0", "disName", 1024*1024);
        }

        /**
         * 创建数据表
         * @returns {*}
         */
        function initDB() {
            var db = getDatabase();
            if (!db) {
                alert("您的浏览器不支持Web SQL技术，请更新版本！");
                return;
            }
            
            db.transaction(function (tran) {
                tran.executeSql("create table if not exists Demo(fn text null, ln text null, un test null)", [],function (ts, res){
                    //成功
                }, function (ts, msg) {
                    alert(msg);
                    //失败
                });
            });
            return db;
        }

        $(function () {
            var db = initDB();
            $("#sub").click(function () {
                var fn = $("#firstName").val(),
                    ln = $("#lastName").val(),
                    un = $("#userName").val();

                //插入数据
                db.transaction(function (tran) {
                    tran.executeSql("insert into Demo (fn, ln, un) values (?, ?, ?)", [fn, ln, un], function (ts, res) {
                        //成功
                        fetchData();
                    }, function (ts, msg) {
                        alert(msg);
                        //失败
                    });
                });
            });

            /**
             * 从数据表中获取全部数据
             */
            function fetchData() {
                var db = getDatabase();
                db.transaction(function (tran) {
                    tran.executeSql("select * from Demo", [], function (ts, res) {
                        //成功
                        $("#body").empty();
                        $.each(res.rows, function (idx, data) {
                            renderTable(idx, data);
                        });
                    }, function (ts, msg) {
                        alert(msg);
                        //失败
                    });
                });
            }
            fetchData();

            /**
             * 展示全部数据
             * @param data
             */
            function renderTable(idx, data) {
                var html = "<tr>";
                html += "<td>" + (idx + 1) + "</td>";
                html += "<td>" + data.fn + "</td>";
                html += "<td>" + data.ln + "</td>";
                html += "<td>" + data.un + "</td>";
                html += "</tr>";

                $("#body").append(html);
            }
        });
    </script>
</body>
</html>

页面效果如下：
在这里插入图片描述

雾里看花叹朦胧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html5 Storage Web SQL 示例

整个项目目录结构如下：具体示例如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo...
复制链接

扫一扫