當前位置:首頁 » 數據倉庫 » html5讀寫資料庫
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

html5讀寫資料庫

發布時間: 2022-05-10 20:39:51

『壹』 HTML5怎麼連接資料庫

HTML5連接資料庫分為以下幾步:
預備知識:Web sql Database,Html5環境下可以用Js執行CRUD的Web資料庫組件。
核心方法如下:

1、openDatabase:這個方法使用現有資料庫或創建新資料庫創建資料庫對象。
2、transaction:這個方法允許我們根據情況控制事務提交或回滾。
3、executeSql:這個方法用於執行真實的SQL查詢。
第一步:打開連接並創建資料庫

var dataBase = openDatabase("student", "1.0", "student", 1024 * 1024, function () { });
if (!dataBase) {
alert("資料庫創建失敗!");
} else {
alert("資料庫創建成功!");
}
第二步:創建數據表
this.createTable=function() {
dataBase.transaction( function(tx) {
tx.executeSql(
"create table if not exists stu (id REAL UNIQUE, name TEXT)",
[],
function(tx,result){ alert('創建stu表成功'); },
function(tx, error){ alert('創建stu表失敗:' + error.message);
});
});
}
第三步:執行增刪改查
添加數據:

this.insert = function () {
dataBase.transaction(function (tx) {
tx.executeSql(
"insert into stu (id, name) values(?, ?)",
[id, '徐明祥'],
function () { alert('添加數據成功'); },
function (tx, error) { alert('添加數據失敗: ' + error.message);
} );
});

『貳』 html5怎麼跟資料庫鏈接起來

HTML5屬於前端,連接資料庫的話需要一門後端語言,比如PHP,java一類。你可以用java去連接資料庫。html5其實是html的一個版本,只不過在國內被擴大了范圍,變成了html + css + javascript。資料庫跟html5就像頭與腿的關系,2者之間還隔著個身體...

『叄』 Htm5 sqlite問題 html5如何讀取sqlite資料庫文件

<bean id="abstractCollectionBean" abstract="true">
#include<stdio.h>
#include<stdlib.h>
#include<string.h>
void code(int n)
{
char c;
while((c=getchar())!='\n')
{
if(c>='a'&&c<='z')

『肆』 html5的用canves標簽繪圖 如何從資料庫讀取數據

兩種方法,一種是ajax非同步請求數據 ,這種對於數據量比較大點的 ,還有一種是內嵌,現在page_load 里取出數據然後直接潛在前台aspx 頁面里

『伍』 html5網頁顯示資料庫內容

首先,你提到的Java Servlet是用來提供數據的,ajax是用來獲取數據的。
1、後端用servlet、struts、springmvc等從資料庫取數據並轉換成json格式返回,前端用ajax獲取這些json數據。
2、後端用servlet、struts、springmvc等從資料庫取數據並將數據嵌到模板頁面里,前端用jsp、freemarker之類的模板語言直接寫for循環。

『陸』 HTML5本地資料庫存儲數據代碼相關問題

一個網站如何能在客戶的瀏覽器存儲更多的數據呢?

在Html4的時代在瀏覽器端存儲點網站個性化的數據,尤其是用戶瀏覽器的痕跡,用戶的相關數據等一般只能存儲在Cookie中,但是大多是瀏覽器對於Cookie的限制也就逼迫網站存儲數據盡量精簡,想存儲復雜的、關系型的用戶數據就根本不可能了。但是進入Html5時代,這一切都不叫事...

一、本地存儲由來的背景

眾所周知Html4時代Cookie的大小、格式、存儲數據格式等限制,網站應用如果想在瀏覽器端存儲用戶的部分信息,那麼只能藉助於Cookie。但是Cookie的這些限制,也就導致了Cookie只能存儲一些ID之類的標識符等簡單的數據,復雜的數據就更別扯了。

下面是Cookie的限制:

  • 1, 大多數瀏覽器支持最大為 4096 位元組的 Cookie。

  • 2, 瀏覽器還限制站點可以在用戶計算機上存儲的 Cookie 的數量。大多數瀏覽器只允許每個站點存儲 20 個 Cookie;如果試圖存儲更多 Cookie,則最舊的 Cookie 便會被丟棄。

  • 3, 有些瀏覽器還會對它們將接受的來自所有站點的 Cookie 總數作出絕對限制,通常為 300 個。

  • 4, Cookie默認情況都會隨著Http請求發送到後台伺服器,但並不是所有請求都需要Cookie的,比如:js、css、圖片等請求則不需要cookie。

  • Html5的設計者們,一開始就為Html5能成為富客戶端做好了准備。為了破解Cookie的一系列限制,Html5通過JS的新的API就能直接存儲大量的數據到客戶端瀏覽器,而且支持復雜的本地資料庫,讓JS簡直就是逆天了。Html5支持兩種的WebStorage,一種是永久性的本地存儲(localStorage),另外一種是會話級別的本地存儲(sessionStorage)。

    二、會話級別的本地存儲:sessionStorage

    在Html5中增加了一個Js對象:sessionStorage;通過此對象可以直接操作存儲在瀏覽器中的會話級別的WebStorage。存儲在sessionStorage中的數據首先是Key-Value形式的,另外就是它跟瀏覽器當前會話相關,當會話結束後,數據會自動清除,跟未設置過期時間的Cookie類似。

    sessionStorage提供了四個方法來輔助我們進行對本地存儲做相關操作。

  • (1)setItem(key,value):添加本地存儲數據。兩個參數,非常簡單就不說了。

  • (2)getItem(key):通過key獲取相應的Value。

  • (3)removeItem(key):通過key刪除本地數據。

  • (4)clear():清空數據。


  • <script type="text/javascript">

  • //添加key-value 數據到 sessionStorage

  • sessionStorage.setItem("demokey", "hek.com");

  • //通過key來獲取value

  • var dt = sessionStorage.getItem("demokey");

  • alert(dt);

  • //清空所有的key-value數據。

  • //sessionStorage.clear();

  • alert(sessionStorage.length);

  • </script>


  • 對於JS的學習和調試必須得有Chrome的調試工具輔助才能事半功倍。當然Chrome也是我最喜愛的Web開發輔助工具,非常簡單F12快捷鍵就立即打開工具了,包括IE也是這個快捷鍵。通過下圖就可以查看當前瀏覽器中的sessionStorage數據。


    參考在線演示demo

    三、永久本地存儲:localStorage

    在最新的JS的API中增加了localStorage對象,以便於用戶存儲永久存儲的Web端的數據。而且數據不會隨著Http請求發送到後台伺服器,而且存儲數據的大小機會不用考慮,因為在HTML5的標准中要求瀏覽器至少要支持到4MB.所以,這完全是顛覆了Cookie的限制,為Web應用在本地存儲復雜的用戶痕跡數據提供非常方便的技術支持。那接下里分別介紹一下localStorage的常用的方法,當然基本上跟sessionStorage是一致的。

    localStorage提供了四個方法來輔助我們進行對本地存儲做相關操作。

  • (1)setItem(key,value):添加本地存儲數據。兩個參數,非常簡單就不說了。

  • (2)getItem(key):通過key獲取相應的Value。

  • (3)removeItem(key):通過key刪除本地數據。

  • (4)clear():清空數據。


  • <script type="text/javascript">

  • //添加key-value 數據到 sessionStorage

  • localStorage.setItem("demokey", "httpcom");

  • //通過key來獲取value

  • var dt = localStorage.getItem("demokey");

  • alert(dt);

  • //清空所有的key-value數據。

  • //localStorage.clear();

  • alert(localStorage.length);

  • </script>

  • 四、逆天了本地資料庫

    雖然Html5已經提供了功能強大的localStorage和sessionStorage,但是他們兩個都只能提供存儲簡單數據結構的數據,對於復雜的Web應用的數據卻無能為力。逆天的是Html5提供了一個瀏覽器端的資料庫支持,允許我們直接通JS的API在瀏覽器端創建一個本地的資料庫,而且支持標準的SQL的CRUD操作,讓離線的Web應用更加方便的存儲結構化的數據。接下里介紹一下本地數據的相關API和用法。

    操作本地資料庫的最基本的步驟是:

  • 第一步:openDatabase方法:創建一個訪問資料庫的對象。

  • 第二步:使用第一步創建的資料庫訪問對象來執行transaction方法,通過此方法可以設置一個開啟事務成功的事件響應方法,在事件響應方法中可以執行SQL.

  • 第三步:通過executeSql方法執行查詢,當然查詢可以是:CRUD。

  • 接下來分別介紹一下相關的方法的參數和用法。

    (1)openDatabase方法:

  • //Demo:獲取或者創建一個資料庫,如果資料庫不存在那麼創建之

  • var dataBase = openDatabase("student", "1.0", "學生表", 1024 * 1024, function () { });

  • openDatabase方法打開一個已經存在的資料庫,如果資料庫不存在,它還可以創建資料庫。幾個參數意義分別是:

  • 1,資料庫名稱。

  • 2,資料庫的版本號,目前來說傳個1.0就可以了,當然可以不填;

  • 3,對資料庫的描述。

  • 4,設置分配的資料庫的大小(單位是kb)。

  • 5,回調函數(可省略)。

  • 初次調用時創建資料庫,以後就是建立連接了。

  • (2)db.transaction方法可以設置一個回調函數,此函數可以接受一個參數就是我們開啟的事務的對象。然後通過此對象可以進行執行Sql腳本,跟下面的步驟可以結合起來。

    (3)通過executeSql方法執行查詢。

  • ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)

  • 參數說明:

  • qlQuery:需要具體執行的sql語句,可以是create、select、update、delete;

  • value1,value2..]:sql語句中所有使用到的參數的數組,在executeSql方法中,將s>語句中所要使用的參數先用「?」代替,然後依次將這些參數組成數組放在第二個參數中

  • ataHandler:執行成功是調用的回調函數,通過該函數可以獲得查詢結果集;

  • 4,errorHandler:執行失敗時調用的回調函數;

『柒』 html5本地存儲更新資料庫sql 怎麼寫

HTML5本地存儲——Web SQL Database
在HTML5 WebStorage介紹了html5本地存儲的Local Storage和Session Storage,這兩個是以鍵值對存儲的解決方案,存儲少量數據結構很有用,但是對於大量結構化數據就無能為力了,靈活大不夠強大。
Web SQL Database
我們經常在資料庫中處理大量結構化數據,html5引入Web SQL Database概念,它使用 SQL 來操縱客戶端資料庫的 API,這些 API 是非同步的,規范中使用的方言是SQLlite,悲劇正是產生於此,Web SQL Database規范頁面有著這樣的聲明

This document was on the W3C Recommendation track but specification work has stopped. The specification reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.
大概意思就是
這個文檔曾經在W3C推薦規范上,但規范工作已經停止了。目前已經陷入了一個僵局:目前的所有實現都是基於同一個SQL後端(SQLite),但是我們需要更多的獨立實現來完成標准化。
也就是說這是一個廢棄的標准了,雖然部分瀏覽器已經實現,但。。。。。。。
三個核心方法
但是我們學一下也沒什麼壞處,而且能和現在W3C力推的IndexedDB做比較,看看為什麼要廢棄這種方案。Web SQL Database 規范中定義的三個核心方法:
openDatabase:這個方法使用現有資料庫或新建資料庫來創建資料庫對象
transaction:這個方法允許我們根據情況控制事務提交或回滾
executeSql:這個方法用於執行SQL 查詢

openDatabase
我們可以使用這樣簡單的一條語句,創建或打開一個本地的資料庫對象
var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);

openDatabase接收五個參數:
資料庫名字
資料庫版本號
顯示名字
資料庫保存數據的大小(以位元組為單位 )
回調函數(非必須)

如果提供了回調函數,回調函數用以調用 changeVersion() 函數,不管給定什麼樣的版本號,回調函數將把資料庫的版本號設置為空。如果沒有提供回調函數,則以給定的版本號創建資料庫。
transaction
transaction方法用以處理事務,當一條語句執行失敗的時候,整個事務回滾。方法有三個參數
包含事務內容的一個方法
執行成功回調函數(可選)
執行失敗回調函數(可選)

db.transaction(function (context) {
context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');
context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")');
});

這個例子中我們創建了一個table,並在表中插入三條數據,四條執行語句任何一條出現錯誤,整個事務都會回滾
executeSql
executeSql方法用以執行SQL語句,返回結果,方法有四個參數
查詢字元串
用以替換查詢字元串中問號的參數
執行成功回調函數(可選)
執行失敗回調函數(可選)

在上面的例子中我們使用了插入語句,看個查詢的例子

db.transaction(function (context) {
context.executeSql('SELECT * FROM testTable', [], function (context, results) {
var len = results.rows.length, i;
console.log('Got '+len+' rows.');
for (i = 0; i < len; i++){
console.log('id: '+results.rows.item(i).id);
console.log('name: '+results.rows.item(i).name);
}
});

完整示例

<!DOCTYPE HTML>
<html>
<head>
<title>Web SQL Database</title>
</head>
<body>
<script type="text/javascript">
var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (context) {
context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');
context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")');
});

db.transaction(function (context) {
context.executeSql('SELECT * FROM testTable', [], function (context, results) {
var len = results.rows.length, i;
console.log('Got '+len+' rows.');
for (i = 0; i < len; i++){
console.log('id: '+results.rows.item(i).id);
console.log('name: '+results.rows.item(i).name);
}
});
});
</script>
</body>
</html>

最後
由於Web SQL Database規范已經被廢棄,原因說的很清楚,當前的SQL規范採用SQLite的SQL方言,而作為一個標准,這是不可接受的,每個瀏覽器都有自己的實現這還搞毛的標准。這樣瀏覽器兼容性就不重要了,估計慢慢會被遺忘。不過Chrome的控制台真心好用啊,神馬cookie、Local Storage、Session Storage、Web SQL、IndexedDB、Application Cache等html5新增內容看的一清二楚,免去了很多調試代碼工作。

『捌』 html5 可以打開本地資料庫嗎

不可以
資料庫一般裝在服務端,需要服務端語言,如php,asp等進行操作
再說html連接本地資料庫也沒什麼用啊

『玖』 html5如何通過jsp訪問資料庫

html5也就是html代碼,不可以訪問資料庫,要訪問資料庫取數據有很多種方法,ajax 請求 servlet訪問資料庫,jsp 中<%%> 直接請求資料庫寫jdbc語句

『拾』 html5 可以連接資料庫嗎

。所謂html5是作為一種標准。而最終實現是需要瀏覽器內核支持。無論是顯示還是資料庫鏈接

瀏覽器內核有關。然後。html5
是支持SQLite的連接的。需要使用js的資料庫操作的一套api。chrome應該是比較好支持的