《基于新信息技術(shù)的HTML5和CSS3網(wǎng)頁設(shè)計進階教程》課件-第5章

第5章HTML5的本地存儲5.1WebStorage5.2WebSQLDatabase5.3IndexedDB

5.1WebStorage

WebStorage目前有兩種存儲對象：localStorage和sessionStorage。localStorage屬于永久性存儲，而sessionStorage屬于臨時性儲存，當(dāng)會話結(jié)束的時候，sessionStorage中的鍵值對會被清空。也就是說，localStorage對象存儲的數(shù)據(jù)沒有時間限制，一小時、一天、一年后，數(shù)據(jù)依然可用，sessionStorage對象在用戶關(guān)閉瀏覽器窗口時，數(shù)據(jù)就會被刪除。

5.1.1瀏覽器支持檢測

一般來講，判斷瀏覽器是否支持WebStorage，我們只需檢查全局對象是否有l(wèi)ocalStorage或sessionStorage屬性之一即可。此處，我們提供的檢測方法是檢測全局對象是否有l(wèi)ocalStorage屬性。其代碼如下：

5.1.2WebStorageAPI

WebStorageAPI提供了一系列的屬性和方法，訪問儲存在本地的數(shù)據(jù)。這些屬性和方法在localStorage和sessionStorage中都能夠使用，主要的API如表5-1所示。

注意：WebStorageAPI監(jiān)聽事件只會發(fā)生在同源窗口中(同一個頁面的不同窗口)，當(dāng)前窗口不會觸發(fā)監(jiān)聽事件。如果對應(yīng)的操作沒有值，則該值為null。如以上代碼，如果進行插入操作，比如插入值為“testvalue”，則會提示“原本的值為：null?，F(xiàn)在改為：testvalue”。

5.1.3永久本地存儲對象localStorage

在最新的JavaScript的API中增加了localStorage對象，可以使用戶瀏覽器存儲永久的Web端的數(shù)據(jù)，而且存儲的數(shù)據(jù)不會隨著Http請求發(fā)送到后臺服務(wù)器。存儲數(shù)據(jù)的大小可以不用過多考慮，因為在HTML5標(biāo)準中要求瀏覽器至少要支持4MB以上，所以，這完全是顛覆了Cookie只有4KB的限制，為Web應(yīng)用在本地存儲復(fù)雜的用戶痕跡數(shù)據(jù)提供非常方便的技術(shù)支持。

例5-1將關(guān)鍵字和對應(yīng)的值保存到本地，要求：

●

關(guān)閉瀏覽器重新打開頁面依然能看到保存的數(shù)據(jù)。

●

打開多個相同頁面，當(dāng)對數(shù)據(jù)進行操作時，其他頁面同步進行刷新。

代碼實現(xiàn)了本地localStorage存儲數(shù)據(jù)，可以輸入關(guān)鍵字和值進行保存(將數(shù)據(jù)存儲到本地)，也可以輸入關(guān)鍵字進行刪除對應(yīng)本地數(shù)據(jù)操作，還能點擊清空按鈕清空所有本地數(shù)據(jù)。這些數(shù)據(jù)保存在本地，就算關(guān)閉瀏覽器重新打開網(wǎng)頁也不會使數(shù)據(jù)丟失。另外，通過監(jiān)聽localStorage的變化，可以實現(xiàn)多頁面同步更新。為方便查看，我們打開兩個頁面，只操作左邊頁面來進行對比查看，實際效果如圖5-1～圖5-3所示。

圖5-1頁面第一次打開時效果圖5-2輸入一些數(shù)據(jù)后的效果圖5-3關(guān)閉頁面重新打開后的效果

其他按鈕功能類似，此處不再進行截圖說明。接下來，我們對JavaScript代碼進行分析。

第一步：創(chuàng)建localStorage數(shù)據(jù)添加函數(shù)。先通過getElementById()獲取到用戶輸入的鍵和值，再判斷用戶是否有輸入(因為空值也能作為鍵和值存入localStorage中)，如果存在內(nèi)容，則使用setItem()方法將數(shù)據(jù)存入localStorage中，并清空輸入框中已輸入的內(nèi)容，最后調(diào)用加載數(shù)據(jù)函數(shù)，更新表格顯示。其代碼如下：

第二步：創(chuàng)建localStorage數(shù)據(jù)刪除函數(shù)。先通過getElementById()獲取到用戶輸入的鍵，再使用removeItem()方法可以直接刪除對應(yīng)的數(shù)據(jù)，最后清空輸入框重新加載數(shù)據(jù)。其代碼如下：

第三步：創(chuàng)建localStorage清空數(shù)據(jù)函數(shù)。此時只需要使用clear()方法直接清空數(shù)據(jù)再刷新表格即可。其代碼如下：

第四步：有了數(shù)據(jù)以后，接著就是如何將數(shù)據(jù)顯示到頁面上。首先獲取頁面用于顯示數(shù)據(jù)的div元素，再創(chuàng)建一個table元素，判斷l(xiāng)ocalStorage中的內(nèi)容，如果沒有內(nèi)容，則在頁面中顯示沒有數(shù)據(jù)；如果有數(shù)據(jù)，則添加表頭行，遍歷localStorage。然后通過key()方法取出鍵，再通過getItem()方法用取出的鍵獲取鍵對應(yīng)的值，添加到表格的行中；最后設(shè)置表格CSS樣式，清空div中原本的數(shù)據(jù)，將表格顯示在div中。此處，直接使用innerHTML屬性將行附加到表格中。其代碼如下：

第五步：添加window.onload事件，綁定顯示內(nèi)容方法，在頁面打開時加載localStorage中的數(shù)據(jù)；添加事件監(jiān)聽，localStorage有變化時重新加載數(shù)據(jù)。其代碼如下：

5.1.4會話存儲對象sessionStorage

sessionStorage的使用方法與localStorage相似，此處不再贅述，大家可以參考5.1.3內(nèi)容自行測試。sessionStorage與localStorage的區(qū)別在于，sessionStorage用于臨時保存同一窗口(或標(biāo)簽頁)的數(shù)據(jù)，在關(guān)閉窗口或標(biāo)簽頁之后保存的數(shù)據(jù)將會被刪除，類似session。但其與session又有本質(zhì)的區(qū)別：session對象存在于服務(wù)器，占用服務(wù)器資源，有過期時間限制，安全級別高；sessionStorage對象保存在客戶端，只要用戶不關(guān)閉頁面就不會過期，但是可以被某些工具查看或修改其中的內(nèi)容，安全級別低。

5.2WebSQLDatabase

WebSQLDatabase，是隨著HTML5規(guī)范加入的在瀏覽器端運行的輕量級數(shù)據(jù)庫。在HTML4中，數(shù)據(jù)庫只能放在服務(wù)器端，只能通過服務(wù)器來訪問數(shù)據(jù)庫；但是在HTML5中，內(nèi)置了一個可以通過SQL語言來訪問的數(shù)據(jù)庫，可以就像訪問本地文件那樣輕松地對內(nèi)置的數(shù)據(jù)庫進行直接訪問。

WebSQLDatabaseAPI并不是HTML5規(guī)范的一部分，但是它是一個獨立的規(guī)范，引入了一組使用SQL操作客戶端數(shù)據(jù)庫的API，其中有3個核心的方法，通過這3個方法可以實現(xiàn)打開數(shù)據(jù)庫、執(zhí)行SQL語句和控制事務(wù)的功能，如表5-2所示。

openDatabase()方法用于打開或創(chuàng)建數(shù)據(jù)庫。如果數(shù)據(jù)庫已存在則打開數(shù)據(jù)庫，如果數(shù)據(jù)庫不存在則創(chuàng)建一個新的數(shù)據(jù)庫，語法如下：

參數(shù)說明如下：

●?database_name：數(shù)據(jù)庫名稱。

●?database_version：版本號。

●?database_displayname：描述文本。

●?database_size：數(shù)據(jù)庫大小。

如創(chuàng)建一個用戶數(shù)據(jù)庫，大小為5MB，則語法如下：

transaction()方法接收一個方法作為參數(shù)，在作為參數(shù)的方法中使用executeSql()方法執(zhí)行SQL語句。在之前創(chuàng)建的數(shù)據(jù)庫中創(chuàng)建一張user表，并在表中插入兩條數(shù)據(jù)，代碼如下：

從數(shù)據(jù)庫中將已存在的數(shù)據(jù)取出并顯示在頁面上，代碼如下：

上面的實例代碼組合起來即可完成一個頁面實例。其代碼如下：

打開頁面，可以看到頁面中顯示了從數(shù)據(jù)庫中查詢出來的兩條數(shù)據(jù)；同時打開Chrome開發(fā)者工具，在Application–

WebSQL–

userDB–

tUser中可以看到我們使用代碼插入的數(shù)據(jù)。頁面顯示效果如圖5-4所示。

圖5-4頁面顯示效果

在W3C中，WebSQLDatabase被列為了停滯狀態(tài)，由于標(biāo)準認定直接執(zhí)行SQL語句是不可取的，現(xiàn)在的W3C力推的本地數(shù)據(jù)庫是IndexedDB，我們也建議使用IndexedDB數(shù)據(jù)庫，而不要使用WebSQLDatabase數(shù)據(jù)庫。因此，本節(jié)我們只對WebSQLDatabase進行基本的介紹，便于我們與其他的本地存儲手段做比較。

5.3IndexedDB

實際上WebSQLDatabase已經(jīng)被廢棄，而HTML5支持的本地數(shù)據(jù)庫變成了IndexedDB，這是瀏覽器提供的一種最新標(biāo)準的本地數(shù)據(jù)庫，它可以被網(wǎng)頁腳本創(chuàng)建和操作。IndexedDB允許儲存大量數(shù)據(jù)，提供查找接口，還能建立索引。就數(shù)據(jù)庫類型而言，IndexedDB不屬于關(guān)系型數(shù)據(jù)庫，即不支持SQL查詢語句，更接近NoSQL數(shù)據(jù)庫。

5.3.1IndexedDB的特點

IndexedDB具有以下特點：

●

鍵值對儲存。IndexedDB內(nèi)部采用對象倉庫(objectstore)存放數(shù)據(jù)。所有類型的數(shù)據(jù)都可以直接存入，包括JavaScript對象。對象倉庫中，數(shù)據(jù)以“鍵值對”的形式保存，每一個數(shù)據(jù)記錄都有對應(yīng)的主鍵，主鍵是獨一無二的，不能有重復(fù)，否則會拋出一個錯誤。

●

異步讀寫。IndexedDB操作時不會鎖死瀏覽器，用戶依然可以進行其他操作，這與localStorage形成對比，后者的操作是同步的。異步設(shè)計是為了防止大量數(shù)據(jù)的讀寫而拖慢網(wǎng)頁的表現(xiàn)。

●

支持事務(wù)。IndexedDB支持事務(wù)(transaction)，這意味著一系列操作步驟之中，只要有一步失敗，整個事務(wù)就都取消，數(shù)據(jù)庫回滾到事務(wù)發(fā)生之前的狀態(tài)，不存在只改寫一部分數(shù)據(jù)的情況。

●

同源限制。IndexedDB受到同源限制，每一個數(shù)據(jù)庫對應(yīng)創(chuàng)建它的域名。網(wǎng)頁只能訪問自身域名下的數(shù)據(jù)庫，而不能訪問跨域的數(shù)據(jù)庫。

●

儲存空間大。IndexedDB的儲存空間比LOCAlStorage大得多，一般來說不少于250MB，甚至沒有上限。

●

支持二進制儲存。IndexedDB不僅可以儲存字符串，還可以儲存二進制數(shù)據(jù)(ArrayBuffer對象和Blob對象)。

5.3.2兼容檢測

InternetExplorer(IE)10+、Firefox、Opera、Chrome以及Safari都支持IndexedDB數(shù)據(jù)庫，IE9以及更早的版本不支持IndexedDB數(shù)據(jù)庫，如果不考慮IE的情況下可以放心使用。同時，我們可以使用下面的代碼檢測瀏覽器是否支持IndexedDB數(shù)據(jù)庫。

5.3.3IndexedDB

API

IndexedDB是一個比較復(fù)雜的API，涉及不少概念，它把不同的實體抽象成一個個對象接口。學(xué)習(xí)這個API，就是學(xué)習(xí)它的各種對象接口。IndexedDBAPI對象如表5-3所示。

5.3.4IndexedDB數(shù)據(jù)庫基本操作流程

1.打開數(shù)據(jù)庫

使用IndexedDB的第一步是打開數(shù)據(jù)庫，使用indexedDB.open(databaseName,version)方法。這個方法接收兩個參數(shù)：第一個參數(shù)是數(shù)據(jù)庫名，如果指定的數(shù)據(jù)庫不存在，則會新建數(shù)據(jù)庫。第二個參數(shù)是整數(shù)，表示數(shù)據(jù)庫的版本，如果省略，打開已有數(shù)據(jù)庫時，默認為當(dāng)前版本；新建數(shù)據(jù)庫時，默認為1。此方法返回一個IDBRequest對象。這個對象通過3種事件error、success和upgradeneeded，處理打開數(shù)據(jù)庫的操作結(jié)果。

●

error事件：表示打開數(shù)據(jù)庫失敗。

●

success事件：表示成功打開數(shù)據(jù)庫。此時，通過request對象的result屬性拿到數(shù)據(jù)庫對象。

●

upgradeneeded事件：表示數(shù)據(jù)庫升級。如果指定的版本號大于數(shù)據(jù)庫的實際版本號，就會發(fā)生數(shù)據(jù)庫升級事件upgradeneeded。此時，通過事件對象的target.result屬性拿到數(shù)據(jù)庫實例。

2.新建數(shù)據(jù)庫

新建數(shù)據(jù)庫與打開數(shù)據(jù)庫是同一個操作。如果指定的數(shù)據(jù)庫不存在，就會新建。不同之處在于，后續(xù)的操作主要在upgradeneeded事件的監(jiān)聽函數(shù)里面完成，因為這時版本從無到有，所以會觸發(fā)這個事件。通常，新建數(shù)據(jù)庫以后，第一件事是新建對象倉庫(即新建表)。

數(shù)據(jù)庫新建成功以后，先判斷一下名為user的表格是否存在，再新增一張叫做user的表格，主鍵是id。

3.新增數(shù)據(jù)

新增數(shù)據(jù)指的是向?qū)ο髠}庫寫入數(shù)據(jù)記錄。寫入數(shù)據(jù)需要新建一個事務(wù)，必須指定表格名稱和操作模式(“只讀”或“讀寫”)。新建事務(wù)以后，通過IDBTransaction.objectStore(name)方法拿到IDBObjectStore對象，再通過表格對象的add()方法向表格寫入一條記錄。

寫入操作是一個異步操作，通過監(jiān)聽連接對象的success事件和error事件，了解是否寫入成功。向user表中寫入一條數(shù)據(jù)的代碼如下：

4.讀取數(shù)據(jù)

讀取數(shù)據(jù)也是通過事務(wù)來完成。下面的代碼中，ob