如何在 HTML5 中将数据存储到数据库中

Posted 2023-03-23

【中文标题】如何在 HTML5 中将数据存储到数据库中

【英文标题】：how to store data to database in HTML5

【发布时间】：2012-03-26 02:40:46

【问题描述】：

我正在尝试用 html5 构建移动应用程序。 我需要将数据存储在数据库中。 我已经查看了 web sql 数据库。 我可能无法正确理解这一点，但这对我来说似乎是一个本地存储。 任何想法或参考如何解决这个问题？

TIA。

【参考方案1】：

在这里，我粘贴了一个非常简单的 web sqlite 数据库示例。我找到了here

Blog Entry:
My Safari Browser SQLite Database Hello World Example

Author:
Ben Nadel / Kinky Solutions

Link:
[http://www.bennadel.com/index.cfm?event=blog.view&id=1940][2]

Date Posted:
Jun 11, 2010 at 9:38 AM

---- -------------------------------------------------------- -------------------------------------------- --->

Safari SQLite Hello World 示例

    // The first thing we want to do is create the local
    // database (if it doesn't exist) or open the connection
    // if it does exist. Let's define some options for our
    // test database.
    var databaseOptions = 
        fileName: "sqlite_helloWorld",
        version: "1.0",
        displayName: "SQLite Hello World",
        maxSize: 1024
    ;

    // Now that we have our database properties defined, let's
    // creaete or open our database, getting a reference to the
    // generated connection.
    //
    // NOTE: This might throw errors, but we're not going to
    // worry about that for this Hello World example.
    var database = openDatabase(
        databaseOptions.fileName,
        databaseOptions.version,
        databaseOptions.displayName,
        databaseOptions.maxSize
    );


    // -------------------------------------------------- //
    // -------------------------------------------------- //


    // Now that we have the databse connection, let's create our
    // first table if it doesn't exist. According to Safari, all
    // queries must be part of a transaction. To execute a
    // transaction, we have to call the transaction() function
    // and pass it a callback that is, itself, passed a reference
    // to the transaction object.
    database.transaction(
        function( transaction )

            // Create our girls table if it doesn't exist.
            transaction.executeSql(
                "CREATE TABLE IF NOT EXISTS girls (" +
                    "id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT," +
                    "name TEXT NOT NULL" +
                ");"
            );

        
    );


    // -------------------------------------------------- //
    // -------------------------------------------------- //


    // Now that we have our database table created, let's
    // create some "service" functions that we can use to
    // touch the girls (no, not in that way - perv).

    // NOTE: Since SQLite database interactions are performed
    // asynchronously by default (it seems), we have to provide
    // callbacks to execute when the results are available.


    // I save a girl.
    var saveGirl = function( name, callback )
        // Insert a new girl.
        database.transaction(
            function( transaction )

                // Insert a new girl with the given values.
                transaction.executeSql(
                    (
                        "INSERT INTO girls (" +
                            "name " +
                        " ) VALUES ( " +
                            "? " +
                        ");"
                    ),
                    [
                        name
                    ],
                    function( transaction, results )
                        // Execute the success callback,
                        // passing back the newly created ID.
                        callback( results.insertId );
                    
                );

            
        );
    ;


    // I get all the girls.
    var getGirls = function( callback )
        // Get all the girls.
        database.transaction(
            function( transaction )

                // Get all the girls in the table.
                transaction.executeSql(
                    (
                        "SELECT " +
                            "* " +
                        "FROM " +
                            "girls " +
                        "ORDER BY " +
                            "name ASC"
                    ),
                    [],
                    function( transaction, results )
                        // Return the girls results set.
                        callback( results );
                    
                );

            
        );
    ;


    // I delete all the girls.
    var deleteGirls = function( callback )
        // Get all the girls.
        database.transaction(
            function( transaction )

                // Delete all the girls.
                transaction.executeSql(
                    (
                        "DELETE FROM " +
                            "girls "
                    ),
                    [],
                    function()
                        // Execute the success callback.
                        callback();
                    
                );

            
        );
    ;


    // -------------------------------------------------- //
    // -------------------------------------------------- //


    // When the DOM is ready, init the scripts.
    $(function()
        // Get the form.
        var form = $( "form" );

        // Get the girl list.
        var list = $( "#girls" );

        // Get the Clear Girls link.
        var clearGirls = $( "#clearGirls" );


        // I refresh the girls list.
        var refreshGirls = function( results )
            // Clear out the list of girls.
            list.empty();

            // Check to see if we have any results.
            if (!results)
                return;
            

            // Loop over the current list of girls and add them
            // to the visual list.
            $.each(
                results.rows,
                function( rowIndex )
                    var row = results.rows.item( rowIndex );

                    // Append the list item.
                    list.append( "<li>" + row.name + "</li>" );
                
            );
        ;


        // Bind the form to save the girl.
        form.submit(
            function( event )
                // Prevent the default submit.
                event.preventDefault();

                // Save the girl.
                saveGirl(
                    form.find( "input.name" ).val(),
                    function()
                        // Reset the form and focus the input.
                        form.find( "input.name" )
                            .val( "" )
                            .focus()
                        ;

                        // Refresh the girl list.
                        getGirls( refreshGirls );
                    
                );
            
        );


        // Bind to the clear girls link.
        clearGirls.click(
            function( event )
                // Prevent default click.
                event.preventDefault();

                // Clear the girls
                deleteGirls( refreshGirls );
            
        );


        // Refresh the girls list - this will pull the persisted
        // girl data out of the SQLite database and put it into
        // the UL element.
        getGirls( refreshGirls );
    );

</script>

<h1>
    SQLite Hello World Example
</h1>

<form>
    Name:
    <input type="text" name="name" class="name" />
    <input type="submit" value="Add Girl" />
</form>

<h2>
    Girls
</h2>

<ul id="girls">
    <!-- To be populated dynamically from SQLite. -->
</ul>

<p>
    <a id="clearGirls" href="#">Clear Girls</a>!
</p>

【参考方案2】：

http://www.html5rocks.com/en/features/storage 本地存储是移动应用中的存储。通常用于离线数据和保存数据加速导航。如果您需要服务器存储，则需要托管服务器。存储服务器不同。

【参考方案3】：

感谢您的回答。 但是这个 web sql 数据库只是本地存储而已。 所以我最终使用 jquery 来调用 php 脚本。

谢谢