HTML5本地存儲——Web SQL Database

時間 2019-11-29

標籤 html5 html 本地存儲 web sql database 欄目 HTML5 简体版

原文原文鏈接

在HTML5 WebStorage介紹了html5本地存儲的Local Storage和Session Storage，這兩個是以鍵值對存儲的解決方案，存儲少許數據結構頗有用，可是對於大量結構化數據就無能爲力了，靈活大不夠強大。javascript

Web SQL Database

咱們常常在數據庫中處理大量結構化數據，html5引入Web SQL Database概念，它使用 SQL 來操縱客戶端數據庫的 API，這些 API 是異步的，規範中使用的方言是SQLlite，悲劇正是產生於此，Web SQL Database規範頁面有着這樣的聲明html

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.html5

大概意思就是java

這個文檔曾經在W3C推薦規範上，但規範工做已經中止了。目前已經陷入了一個僵局：目前的全部實現都是基於同一個SQL後端（SQLite），可是咱們須要更多的獨立實現來完成標準化。web

也就是說這是一個廢棄的標準了，雖然部分瀏覽器已經實現，但。。。。。。。數據庫

三個核心方法

可是咱們學一下也沒什麼壞處，並且能和如今W3C力推的IndexedDB作比較，看看爲何要廢棄這種方案。Web SQL Database 規範中定義的三個核心方法：後端

openDatabase：這個方法使用現有數據庫或新建數據庫來建立數據庫對象
transaction：這個方法容許咱們根據狀況控制事務提交或回滾
executeSql：這個方法用於執行SQL 查詢

openDatabase

咱們可使用這樣簡單的一條語句，建立或打開一個本地的數據庫對象瀏覽器

var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);

openDatabase接收五個參數：cookie

數據庫名字
數據庫版本號
顯示名字
數據庫保存數據的大小（以字節爲單位 )
回調函數（非必須)

若是提供了回調函數，回調函數用以調用 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新增內容看的一清二楚，免去了不少調試代碼工做。