亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

通過(guò)90行代碼學(xué)會(huì)HTML5 WebSQL的4種基本操作

CatalpaFlat / 2599人閱讀

摘要：下面就來(lái)分析下這行代碼。函數(shù)的第行，調(diào)用了的，創(chuàng)建了一個(gè)名為的數(shù)據(jù)庫(kù)。使用前一步驟得到的數(shù)據(jù)庫(kù)句柄，通過(guò)數(shù)據(jù)庫(kù)句柄暴露的執(zhí)行一個(gè)數(shù)據(jù)庫(kù)事務(wù)。數(shù)據(jù)庫(kù)表明為，主鍵為，有兩個(gè)列和。

Web SQL數(shù)據(jù)庫(kù)API是一個(gè)獨(dú)立的規(guī)范，在瀏覽器層面提供了本地對(duì)結(jié)構(gòu)化數(shù)據(jù)的存儲(chǔ)，已經(jīng)被很多現(xiàn)代瀏覽器支持了。

我們通過(guò)一個(gè)簡(jiǎn)單的例子來(lái)了解下如何使用Web SQL API在瀏覽器端創(chuàng)建數(shù)據(jù)庫(kù)表并存儲(chǔ)數(shù)據(jù)。

在瀏覽器里執(zhí)行這個(gè)應(yīng)用，會(huì)創(chuàng)建一個(gè)名叫mydb的數(shù)據(jù)庫(kù)，里面一張名為“user”的數(shù)據(jù)庫(kù)表，并且插入一條記錄進(jìn)去，然后從數(shù)據(jù)庫(kù)表中讀取中來(lái)，打印在瀏覽器上。

下面就來(lái)分析下這90行代碼。

程序的入口是setupDB這個(gè)函數(shù)，下面的setInterval起了1個(gè)間隔為200毫秒的周期執(zhí)行函數(shù)，為了模擬當(dāng)前瀏覽器除了進(jìn)行Web SQL數(shù)據(jù)庫(kù)外，還有其他的任務(wù)再執(zhí)行。

setupDB

用promise實(shí)現(xiàn)了一個(gè)鏈?zhǔn)秸{(diào)用，第九行代碼從語(yǔ)義上來(lái)說(shuō)很容易理解：首先創(chuàng)建數(shù)據(jù)庫(kù)(createDatabase)，然后創(chuàng)建數(shù)據(jù)庫(kù)表(createTable)，然后插入一條記錄到數(shù)據(jù)庫(kù)表里(insertEntry), 然后馬上把剛才插入表里的記錄讀出來(lái)(readEntry)。最后打印到瀏覽器上。

大家看我第16行的_createDatabaseOK的函數(shù)延時(shí)1秒執(zhí)行，僅僅是為了演示W(wǎng)ebSQL API 異步調(diào)用的最佳實(shí)踐。

createDatabase函數(shù)的第15行，調(diào)用了Web SQL API的openDatabase，創(chuàng)建了一個(gè)名為mydb的數(shù)據(jù)庫(kù)。openDatabase會(huì)返回一個(gè)數(shù)據(jù)庫(kù)句柄，我們保存在屬性_db里以便后續(xù)使用。

createTable

使用前一步驟得到的數(shù)據(jù)庫(kù)句柄，通過(guò)數(shù)據(jù)庫(kù)句柄暴露的API transaction, 執(zhí)行一個(gè)數(shù)據(jù)庫(kù)事務(wù)。事務(wù)的具體內(nèi)容是一個(gè)SQL語(yǔ)句，通過(guò)executeSql調(diào)用來(lái)創(chuàng)建數(shù)據(jù)庫(kù)表：

create table if not exists user(id unique, user, passwd)

用過(guò)JDBC的朋友對(duì)這種寫(xiě)法應(yīng)該很熟悉。

數(shù)據(jù)庫(kù)表明為user，主鍵為id，有兩個(gè)列user和passwd。

insertEntry

在前一步驟中創(chuàng)建的user數(shù)據(jù)庫(kù)表中插入一行記錄，id為1，user值為Jerry，passwd為1234。

insert into user values (1,"Jerry","1234")

readEntry

還是通過(guò)第一步創(chuàng)建的數(shù)據(jù)庫(kù)句柄_db, 執(zhí)行一個(gè)數(shù)據(jù)庫(kù)事務(wù)，內(nèi)容為SELECT語(yǔ)句，從user表里讀出所有記錄。

如果想清除掉Web SQL里的數(shù)據(jù)庫(kù)表，在Chrome開(kāi)發(fā)者工具里點(diǎn)擊Clear storage：

選中您要清除的Storage類(lèi)型，點(diǎn)“Clear Site Data"即可。

要獲取更多Jerry的原創(chuàng)技術(shù)文章，請(qǐng)關(guān)注公眾號(hào)"汪子熙"或者掃描下面二維碼:

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/98570.html

相關(guān)文章

  • JavaScript の MUI-APP 數(shù)據(jù)儲(chǔ)存方法

    摘要：是手機(jī)端關(guān)系型數(shù)據(jù)庫(kù)的最佳方案，各種手機(jī)都支持。但是目前手機(jī)端重量數(shù)據(jù)存儲(chǔ)的唯一可商用方案。是里最新的數(shù)據(jù)存儲(chǔ)規(guī)范，但不是基于，而是基于對(duì)象。與的標(biāo)準(zhǔn)相比，的擴(kuò)展主要是為了跨域。有網(wǎng)友封裝了一個(gè)框架，針對(duì)數(shù)據(jù)，在超過(guò)時(shí)自動(dòng)切換到，參考。 總結(jié)HTML5+的離線本地存儲(chǔ)的多種方案: [ √ ] HTML5標(biāo)準(zhǔn)方案：cookie、localstorage、sessionstorage、w...

    fancyLuo 評(píng)論0 收藏0

  • JavaScript の MUI-APP 數(shù)據(jù)儲(chǔ)存方法

    摘要：是手機(jī)端關(guān)系型數(shù)據(jù)庫(kù)的最佳方案，各種手機(jī)都支持。但是目前手機(jī)端重量數(shù)據(jù)存儲(chǔ)的唯一可商用方案。是里最新的數(shù)據(jù)存儲(chǔ)規(guī)范，但不是基于，而是基于對(duì)象。與的標(biāo)準(zhǔn)相比，的擴(kuò)展主要是為了跨域。有網(wǎng)友封裝了一個(gè)框架，針對(duì)數(shù)據(jù)，在超過(guò)時(shí)自動(dòng)切換到，參考。 總結(jié)HTML5+的離線本地存儲(chǔ)的多種方案: [ √ ] HTML5標(biāo)準(zhǔn)方案：cookie、localstorage、sessionstorage、w...

    wenshi11019 評(píng)論0 收藏0

  • [聊一聊系列]聊一聊前端存儲(chǔ)那些事兒

    摘要：如圖圖顧名思義，，是級(jí)別的存儲(chǔ)。如筆者寫(xiě)的一篇淺析文章聊一聊百度移動(dòng)端首頁(yè)前端速度那些事兒讀者們可以嘗試使用。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/frontenddriver 在web開(kāi)發(fā)越來(lái)越復(fù)雜的今天，前端擁有的能力也越來(lái)越多。其中最重要的一項(xiàng)莫過(guò)于web存儲(chǔ)。...

    caige 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<