iT邦幫忙

6

[Web App] Javascript 操作 Web SQL Database

培根 2012-04-24 19:22:4020620 瀏覽

這是 HTML5 離線存儲裡的一個應用,
在開發 Web App 時 ,
如果配合 SQLite ,
能讓離線資料的應用更加靈活。

看到這周主題我才發現...
我第一周發的來寫個Web App吧!(jQuery + YQL),
似乎挑錯時機了倒
以下是對資料庫的基本操作:
1.建立資料庫 ( 資料庫名稱、版本、描述、資料庫大小 )

var db = openDatabase('mydb', '1.0', '測試用', 2*1024*1024);

2.建立資料表

db.transaction(function(tx){
    tx.executeSql("Create Table test(id TEXT,value TEXT)");
});

3.新增資料

db.transaction(function(tx){
    tx.executeSql("INSERT INTO test VALUES (1,'data')");
});

4.刪除資料

db.transaction(function(tx){
    tx.executeSql("DELETE FROM test WHERE id = 1");
});

5.修改資料

db.transaction(function(tx){
    tx.executeSql("UPDATE test SET value = 'other' WHERE id = 1");
});

6.查詢資料

db.transaction(function(tx){
    tx.executeSql(
        "SELECT id,value FROM test",[],function(tx,result){
            for (var i=0 ; i < result.rows.length; i++){
                console.log(result.rows.item(i).value);
            }
        }
    );
});

以上如果有學過 SQL 應該不難上手,
再來是一些比較進階的應用
1.建立含有 流水號 欄位的資料表 (自動遞增)

db.transaction(function(tx){
    tx.executeSql("Create Table test2(id INTEGER PRIMARY KEY,value TEXT)");
});

新增資料必須指定欄位

db.transaction(function(tx){
    tx.executeSql("INSERT INTO test2(value) VALUES ('data')");
});

2.合併資料表查詢

db.transaction(function(tx){
    tx.executeSql(
        "SELECT test.id,test2.value FROM test left join test2 on test.id = test2.id",[],function(tx,result){
            for (var i=0 ; i < result.rows.length; i++){
                console.log(result.rows.item(i).value);
            }
        }
    );
});

2 則留言

0
fillano
iT邦超人 1 級 ‧ 2012-04-25 09:26:29

http://dev.w3.org/html5/webdatabase

不好意思,吐個槽...如果您有仔細看一下文件的開頭,就會發現這個規格已經被W3C喊停了,我怕在一些瀏覽器恐怕無法執行。目前瀏覽器有支援而且W3C有繼續維護的標準是Web Storage,上述文件內有連結。

另外,不知道您有跑過您的範例嗎?不知道目前有哪些瀏覽器還支援?

培根 iT邦新手 3 級‧ 2012-04-25 12:19:17 檢舉

原來如此...Orz
我查到的原因如下:

目前所有實現了 Web SQL Database 的瀏覽器都是使用 SQLite 來做 SQL 後端。
但 SQLite 不是標準,也沒有完全遵守 SQL 標準,
這使得 Web SQL Database 的細則制定進入了一個死胡同。
因此 W3C 組織 (Web Applications Working Group) 已不再維護這項技術!

1.我在 Chrome 18 上跑我的範例是ok的
2.目前似乎剩 Chrome、Oracle、Safari 還有支援

查了一下接下來或許會改用 Indexed DataBase 來代替
http://html5-demos.appspot.com/static/html5storage/index.html

fillano iT邦超人 1 級‧ 2012-04-25 14:03:41 檢舉

這其實也蠻扯的,但是W3C不通融...說實話,local的sql solution,除了sqlite,恐怕也沒啥選擇。

目前看起來是泛webkit家族有支援?如果都不行,就只好先用localStorage或sessionStorage頂著。

0
carl830
iT邦研究生 5 級 ‧ 2012-04-29 00:40:06

建立和新增資料的地方重複了
然後接下來的幾個操作和sql內容都對不上
修改不會是Delete, 查詢不會是Update吧0.0a

培根 iT邦新手 3 級‧ 2012-04-29 01:17:24 檢舉

從 blog 移過來的時候太粗心貼錯位了...
沒有你的提醒我還真的沒發覺...
謝謝!謝謝

我要留言

立即登入留言