摘要:下面就來分析下這行代碼。函數(shù)的第行,調(diào)用了的,創(chuàng)建了一個名為的數(shù)據(jù)庫。使用前一步驟得到的數(shù)據(jù)庫句柄,通過數(shù)據(jù)庫句柄暴露的執(zhí)行一個數(shù)據(jù)庫事務(wù)。數(shù)據(jù)庫表明為,主鍵為,有兩個列和。
Web SQL數(shù)據(jù)庫API是一個獨立的規(guī)范,在瀏覽器層面提供了本地對結(jié)構(gòu)化數(shù)據(jù)的存儲,已經(jīng)被很多現(xiàn)代瀏覽器支持了。
我們通過一個簡單的例子來了解下如何使用Web SQL API在瀏覽器端創(chuàng)建數(shù)據(jù)庫表并存儲數(shù)據(jù)。
在瀏覽器里執(zhí)行這個應(yīng)用,會創(chuàng)建一個名叫mydb的數(shù)據(jù)庫,里面一張名為“user”的數(shù)據(jù)庫表,并且插入一條記錄進去,然后從數(shù)據(jù)庫表中讀取中來,打印在瀏覽器上。
下面就來分析下這90行代碼。
程序的入口是setupDB這個函數(shù),下面的setInterval起了1個間隔為200毫秒的周期執(zhí)行函數(shù),為了模擬當(dāng)前瀏覽器除了進行Web SQL數(shù)據(jù)庫外,還有其他的任務(wù)再執(zhí)行。
setupDB用promise實現(xiàn)了一個鏈?zhǔn)秸{(diào)用,第九行代碼從語義上來說很容易理解:首先創(chuàng)建數(shù)據(jù)庫(createDatabase),然后創(chuàng)建數(shù)據(jù)庫表(createTable),然后插入一條記錄到數(shù)據(jù)庫表里(insertEntry), 然后馬上把剛才插入表里的記錄讀出來(readEntry)。最后打印到瀏覽器上。
大家看我第16行的_createDatabaseOK的函數(shù)延時1秒執(zhí)行,僅僅是為了演示W(wǎng)ebSQL API 異步調(diào)用的最佳實踐。
createDatabase函數(shù)的第15行,調(diào)用了Web SQL API的openDatabase,創(chuàng)建了一個名為mydb的數(shù)據(jù)庫。openDatabase會返回一個數(shù)據(jù)庫句柄,我們保存在屬性_db里以便后續(xù)使用。
createTable使用前一步驟得到的數(shù)據(jù)庫句柄,通過數(shù)據(jù)庫句柄暴露的API transaction, 執(zhí)行一個數(shù)據(jù)庫事務(wù)。事務(wù)的具體內(nèi)容是一個SQL語句,通過executeSql調(diào)用來創(chuàng)建數(shù)據(jù)庫表:
create table if not exists user(id unique, user, passwd)
用過JDBC的朋友對這種寫法應(yīng)該很熟悉。
數(shù)據(jù)庫表明為user,主鍵為id,有兩個列user和passwd。
insertEntry在前一步驟中創(chuàng)建的user數(shù)據(jù)庫表中插入一行記錄,id為1,user值為Jerry,passwd為1234。
insert into user values (1,"Jerry","1234")
readEntry還是通過第一步創(chuàng)建的數(shù)據(jù)庫句柄_db, 執(zhí)行一個數(shù)據(jù)庫事務(wù),內(nèi)容為SELECT語句,從user表里讀出所有記錄。
如果想清除掉Web SQL里的數(shù)據(jù)庫表,在Chrome開發(fā)者工具里點擊Clear storage:
選中您要清除的Storage類型,點“Clear Site Data"即可。
要獲取更多Jerry的原創(chuàng)技術(shù)文章,請關(guān)注公眾號"汪子熙"或者掃描下面二維碼:
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/98570.html
摘要:是手機端關(guān)系型數(shù)據(jù)庫的最佳方案,各種手機都支持。但是目前手機端重量數(shù)據(jù)存儲的唯一可商用方案。是里最新的數(shù)據(jù)存儲規(guī)范,但不是基于,而是基于對象。與的標(biāo)準(zhǔn)相比,的擴展主要是為了跨域。有網(wǎng)友封裝了一個框架,針對數(shù)據(jù),在超過時自動切換到,參考。 總結(jié)HTML5+的離線本地存儲的多種方案: [ √ ] HTML5標(biāo)準(zhǔn)方案:cookie、localstorage、sessionstorage、w...
摘要:是手機端關(guān)系型數(shù)據(jù)庫的最佳方案,各種手機都支持。但是目前手機端重量數(shù)據(jù)存儲的唯一可商用方案。是里最新的數(shù)據(jù)存儲規(guī)范,但不是基于,而是基于對象。與的標(biāo)準(zhǔn)相比,的擴展主要是為了跨域。有網(wǎng)友封裝了一個框架,針對數(shù)據(jù),在超過時自動切換到,參考。 總結(jié)HTML5+的離線本地存儲的多種方案: [ √ ] HTML5標(biāo)準(zhǔn)方案:cookie、localstorage、sessionstorage、w...
摘要:如圖圖顧名思義,,是級別的存儲。如筆者寫的一篇淺析文章聊一聊百度移動端首頁前端速度那些事兒讀者們可以嘗試使用。 歡迎大家收看聊一聊系列,這一套系列文章,可以幫助前端工程師們了解前端的方方面面(不僅僅是代碼):https://segmentfault.com/blog/frontenddriver 在web開發(fā)越來越復(fù)雜的今天,前端擁有的能力也越來越多。其中最重要的一項莫過于web存儲。...
閱讀 2673·2021-11-11 16:54
閱讀 3671·2021-08-16 10:46
閱讀 3451·2019-08-30 14:18
閱讀 3045·2019-08-30 14:01
閱讀 2731·2019-08-29 14:15
閱讀 2016·2019-08-29 11:31
閱讀 3093·2019-08-29 11:05
閱讀 2597·2019-08-26 11:54