html ---- web sql 例子

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <script>
        window.onload = function () {
            var one = document.getElementById('one');

            if (window.openDatabase) {
                var dataBase = openDatabase("student", "1.0", "学生表", 1024*1024, function() {
                    
                });
                dataBase.transaction(function (fx) {
                    //创建一个表
                    fx.executeSql(
                        "create table if not exists stu (id REAL UNIQUE, name TEXT)",
                        [],
                        function () {  //表创建成功
                            alert("表创建成功");
                        },
                        function () {  //表创建失败
                            alert("表创建失败");
                        }
                    );

                    //插入数据
                    fx.executeSql(
                        "insert into stu (id, name) values(?, ?)",
                        [1, "张三"],
                        function () {  //表创建成功
                            alert("数据插入成功");
                        },
                        function () {  //表创建失败
                            alert("数据插入失败");
                        }
                    );

                    //更新数据
                    fx.executeSql(
                        "update stu set name = ? where id = ?",
                        ["李四", 1],
                        function () {  //表创建成功
                            alert("数据更新成功");
                        },
                        function () {  //表创建失败
                            alert("数据更新失败");
                        }
                    );

                    //查询数据
                    fx.executeSql(
                        "select * from stu",
                        [],
                        function (fx, result) {  //表创建成功
                            // alert(result.rows.length);
                            for(var i  = 0; i < result.rows.length; i++) {
                                one.innerHTML = result.rows.item(i)['name'];
                            }
                            alert("数据查询成功");
                        },
                        function () {  //表创建失败
                            alert("数据查询失败");
                        }
                    );

                    //删除数据
                    fx.executeSql(
                        "delete from stu where id=?",
                        [1],
                        function (fx, result) {  //表创建成功
                            one.innerHTML = "";
                        },
                        function () {  //表创建失败
                            alert("删除失败");
                        }
                    );

                    //删除表
                    fx.executeSql(
                        "drop table stu",
                        [],
                        function (fx, result) {  //表创建成功
                            alert("表删除成功");
                        },
                        function () {  //表创建失败
                            alert("表删除失败");
                        }
                    );


                })
            }
        }    
        </script>
    </head>
    <body>
        <p id="one">测试</p>
    </body>
</html>
原文地址:https://www.cnblogs.com/yhdsir/p/4799860.html