HTML 5中的存储及离线应用（二）

最新推荐文章于 2024-05-22 20:30:11 发布

Soloman

最新推荐文章于 2024-05-22 20:30:11 发布

阅读量1.7k

点赞数

分类专栏： HTML5/CSS/JavaScript Android移动开发文章标签： html 存储 function javascript delete button

Android移动开发同时被 2 个专栏收录

77 篇文章 0 订阅

订阅专栏

HTML5/CSS/JavaScript

36 篇文章 0 订阅

订阅专栏

本小节主要讲述如何使用Web SQL。

Web SQL使用SQLite存储，目前在Safari、Chrome等浏览器中支持（还是支持的少啊FF/IE均不支持。。。）；
可以使用SQL语句完成增删改查操作，应该是我们程序员处理复杂数据时最喜欢的方式了

下面来看例子：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- 
    webSQL.html by Bill Weinman 
    <http://bw.org/contact/>
    created 2011-04-16

    Copyright (c) 2011 The BearHeart Group, LLC
    This file may be used for personal educational purposes as needed. 
    Use for other purposes is granted provided that this notice is
    retained and any changes made are clearly indicated as such. 

    1.0.1 - bw 2011-04-19
-->

<head>
    <title>
        webSQL storage example
    </title>
    <link rel="stylesheet" type="text/css" href="../CSS/main.css">
    <script language="javascript" src="../Javascript/bwH5LS.js"></script>
    <script language="javascript">
        var db = prepareDatabase();
		// 创建数据表SQL语句
        var createSQL = 'CREATE TABLE IF NOT EXISTS tTravel (' +
                'id INTEGER PRIMARY KEY,' +
                'traveler TEXT,' +
                'destination TEXT,' +
                'transportation TEXT' +
            ')';

        // Check if this browser supports Web SQL
        function getOpenDatabase() {
			// 如果可以打开数据库说明浏览器支持，否则不支持
            try {
                if( !! window.openDatabase ) return window.openDatabase;
                else return undefined;
            } catch(e) {
                return undefined;
            }
        }

		// 正常情况下Chrome的数据库数据文件存放在C:\Users\Sandy\AppData\Local\Google\Chrome\User Data\Default\databases目录，以子目录的方式存放文件
        // Open the Web SQL database
        function prepareDatabase() {
            var odb = getOpenDatabase();
            if(!odb) {
                dispError('Web SQL Not Supported');
                return undefined;
            } else {
				// 新建/打开测试数据库
                var db = odb( 'testDatabase', '1.0', 'A Test Database', 10 * 1024 * 1024 );
                db.transaction(function (t) {
					// 执行查询语句
                    t.executeSql( 
					// 创建表
					createSQL, 
					// 执行select等语句时的参数
					[], 
					// 查询成功后执行语句
					function(t, r){
						// alert('Create Table, rows effected: ' + r.rowsAffected);
					}, 
					// 查询失败后执行语句
					function(t, e) {
                        alert('create table: ' + e.message);
                    });
                });
                return db;
            }
        }

        // How many rows do we have?
        function countRows() {
            if(!db) return;
			// 查询并显示所有记录
            db.readTransaction(function (t) {
                t.executeSql('SELECT COUNT(*) AS c FROM tTravel', [], function (t, r) {
                    var c = r.rows.item(0).c;
                    element('rowCount').innerHTML = c ? c : 0;
                }, function(t, e) {
                    alert('countRows: ' + e.message);
                });
            });
        }

        // Create the Edit and Delete buttons for a row
        function rowButtons( id, traveler ) {
            return '<form><input type="button" value="Edit" onClick="javascript:editGo(' + id + ')"/>' +
                '<input type="button" value="Delete" onClick="javascript:deleteGo(' + id + ', "' + traveler + '")"/></form>';
        }

        // Main display function
        function dispResults() {
            if(errorMessage) {
                element('results').innerHTML = errorMessage;
                return;
            }

            countRows();    // update the row count each time the display is refreshed

            if(db) {
                db.readTransaction(function(t) {    // readTransaction sets the database to read-only
                    t.executeSql('SELECT * FROM tTravel ORDER BY LOWER(traveler)', [], function(t, r) {
                        var bwt = new bwTable();
                        bwt.setHeader(['Traveler', 'Destination', 'Transportation', '']);
                        for( var i = 0; i < r.rows.length; i++ ) {
                            var row = r.rows.item(i);
                            bwt.addRow([row.traveler, row.destination, row.transportation, rowButtons(row.id, row.traveler)]);
                        }
                        element('results').innerHTML = bwt.getTableHTML();
                        element('travelForm').elements['traveler'].focus();
                    });
                });
            }
        }

        // add or update rows in the table
        function dbGo() {
            if(errorMessage) return;

            var f = element('travelForm');
            var action = f.elements['inputAction'].value;
            var traveler = f.elements['traveler'].value;
            var destination = f.elements['destination'].value;
            var transportation = f.elements['transportation'].value;
            var key = f.elements['key'].value;

            switch(action) {
            case 'add': 
                if(! (traveler || destination || transportation)) break;
                db.transaction( function(t) {
                    t.executeSql(' INSERT INTO tTravel ( traveler, destination, transportation ) VALUES ( ?, ?, ? ) ',
                        [ traveler, destination, transportation ]
                    );
                }, function(t, e){ alert('Insert row: ' + e.message); }, function() {
                    resetTravelForm();
                });
                break;
            case 'update':
                if(! (traveler || destination || transportation)) break;
                db.transaction( function(t) {
                    t.executeSql(' UPDATE tTravel SET traveler = ?, destination = ?, transportation = ? WHERE id = ?',
                        [ traveler, destination, transportation, key ]
                    );
                }, function(t, e){ alert('Update row: ' + e.message); }, function() {
                    resetTravelForm();
                });
                break;
            }
            dispResults();
        }

        // update the edited row
        function editGo(id) {
            db.readTransaction(function(t) {
                t.executeSql('SELECT * FROM tTravel WHERE id = ?', [id], function(t, r) {
                    var row = r.rows.item(0);
                    if(row) {
                        var f = element('travelForm');
                        f.elements['traveler'].value = row.traveler;
                        f.elements['destination'].value = row.destination;
                        f.elements['transportation'].value = row.transportation;
                        f.elements['goButton'].value = 'Update';
                        f.elements['inputAction'].value = 'update';
                        f.elements['key'].value = row.id;
                        f.elements['traveler'].focus();
                        f.elements['traveler'].select();
                    }
                });
            });
        }

        // confirm and delete a row
        function deleteGo(id, traveler) {
            if(confirm('Delete ' + traveler + ' (ID: ' + id + ')?')) {
                db.transaction(function(t) {
                    t.executeSql('DELETE FROM tTravel WHERE id = ?', [id]);
                });
                resetTravelForm();
                dispResults();
            }
        }

        // clear all the form fields and reset the button and action elements
        function resetTravelForm() {
            var f = element('travelForm');
            for( var n in [ 'traveler', 'destination', 'transportation', 'key' ] ) {
                f.elements[n].value = '';
            }
            f.elements['inputAction'].value = 'add';
            f.elements['goButton'].value = 'Add';
        }

        // delete all the rows in the table
        function clearDB() {
            if(confirm('Clear the entire table?')) {
                db.transaction(function(t) {
                    t.executeSql('DELETE FROM tTravel');
                });
                dispResults();
            }
        }

        function initDisp() {
            dispResults();
        }

        window.onload = function() {
            initDisp();
        }
    </script>
</head>

<body>

<div id="content">

    <h1> 
        webSQL storage example
    </h1>
    
    <div id="form">
        <form id="travelForm">
            <table class="form">
                <tr><td class="label"> Traveler </td><td> <input type="text" name="traveler" /> </td></tr>
                <tr><td class="label"> Destination </td><td> <input type="text" name="destination" /> </td></tr>
                <tr><td class="label"> Transportation </td><td> <input type="text" name="transportation" /> </td></tr>
                <tr><td colspan="2" class="button">
                    <input id="formSubmit" type="button" name="goButton" value="Add" onClick="javascript:dbGo()" />
                </td></tr>
            </table>
        <input id="inputAction" type="hidden" name="action" value="add" />
        <input id="inputKey" type="hidden" name="key" value="0" />
        </form>
    </div>
    
    <p id="rcp" class="message">
        There are <span id="rowCount">_</span> rows in the table.
        <input type="button" value="Empty" onClick="javascript:clearDB()" />
    </p>

    <div id="results">
    <!-- results show here -->
    </div>
    
</div>
</body>
</html>

Soloman

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 5中的存储及离线应用（二）

本小节主要讲述如何使用Web SQL。Web SQL使用SQLite存储，目前在Safari、Chrome等浏览器中支持（还是支持的少啊FF/IE均不支持。。。）；可以使用SQL语句完成增删改查操作，应该是我们程序员处理复杂数据时最喜欢的方式了下面来看例子：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans
复制链接

扫一扫