Web前端技術(shù)課件-10. HTML5文件與數(shù)據(jù)處理

HTML5數(shù)據(jù)存儲(chǔ)學(xué)習(xí)導(dǎo)圖10.1HTML5文件操作10.1.1FileList對(duì)象和file對(duì)象在HTML5中，通過(guò)添加multiple屬性，允許file控件一次選擇多個(gè)文件，其中每一個(gè)文件都是一個(gè)file對(duì)象，F(xiàn)ileList對(duì)象則為這些file對(duì)象的列表，代表用戶選擇的所有文件。通過(guò)file對(duì)象的屬性，可以獲取文件的信息，name屬性用來(lái)獲取不包括路徑的文件名，size屬性用來(lái)獲取以字節(jié)為單位的文件大小，type屬性則返回文件的MIME類(lèi)型，lastModified屬性表示文件最后一次修改時(shí)間。10.1.1FileList對(duì)象和file對(duì)象10.1.2BLOB對(duì)象Blob（BinaryLargeObject）對(duì)象相當(dāng)于一個(gè)容器，用于存放二進(jìn)制數(shù)據(jù)。它有兩個(gè)屬性，size屬性表示一個(gè)Blob對(duì)象的字節(jié)長(zhǎng)度，type屬性表示Blob的MIME類(lèi)型，如果是未知類(lèi)型，則返回一個(gè)空字符串。Blob對(duì)象可以使用Blob構(gòu)造函數(shù)來(lái)創(chuàng)建。例如：varblob=newBlob(['hello'],{type:"text/plain"});，其中第一個(gè)參數(shù)是一個(gè)數(shù)組，可以存放ArrayBuffer對(duì)象、ArrayBufferView對(duì)象、Blob對(duì)象和字符串；第二個(gè)參數(shù)指定文件的MIME類(lèi)型。10.1.2BLOB對(duì)象對(duì)于圖像類(lèi)型的文件，Blob對(duì)象的type屬性都是以image/開(kāi)頭，后跟具體圖像類(lèi)型，利用這一特性可以在JavaScript中判斷用戶選擇的文件是否為圖像文件。10.1.3FileReader接口FileReader接口主要用來(lái)把文件讀入內(nèi)存，并讀取文件中的數(shù)據(jù)。FileReader接口提供了一個(gè)異步API，使用該API可以在瀏覽器主線程中異步訪問(wèn)文件系統(tǒng)，讀取文件中的數(shù)據(jù)。在使用FileReader接口前，一般需要先測(cè)試瀏覽器對(duì)FileReader的支持情況，如果支持的話，再創(chuàng)建FileReader對(duì)象。10.1.3FileReader接口FileReader接口方法10.1.3FileReader接口FileReader接口事件10.1.3FileReader接口FileReader接口文件讀取方法10.1.3FileReader接口FileReader接口文件讀取方法10.1.4元素與文件的拖放而在HTML5中，要拖放一個(gè)元素，只要設(shè)置元素的dragable屬性為true，同時(shí)響應(yīng)與元素拖放相關(guān)的事件即可10.1.4元素與文件的拖放元素拖放操作圖片文件拖放操作10.2數(shù)據(jù)交換格式JSON10.2.1JSON概述JSON（JavaScriptObjectNotation）是一種獨(dú)立于語(yǔ)言和平臺(tái)的輕量級(jí)純文本數(shù)據(jù)交換格式，它基于JavaScript的一個(gè)子集，易于人的編寫(xiě)和閱讀，也易于機(jī)器解析。JSON中最基本的數(shù)據(jù)是鍵值對(duì)形式，即Key:Value的結(jié)構(gòu)。例如{"FirstName":"John"}對(duì)象是JSON中常用的一種數(shù)據(jù)結(jié)構(gòu)，它是使用鍵值對(duì)組成的無(wú)序集合，以"{"開(kāi)始，同時(shí)以"}"結(jié)束，鍵值對(duì)之間以":"相隔，不同的鍵值對(duì)之間以","相隔。例如{"FirstName":"Bill","LastName":"Gates","DateOfBirth":"1955-10-28"}。10.2.1JSON概述JSON中另一種數(shù)據(jù)結(jié)構(gòu)是數(shù)組，它是值的有序列表，以"["開(kāi)始，同時(shí)以"]"結(jié)束，多個(gè)值之間用","相隔。例如["apple","banana","grape","orange"]?？梢栽谝粋€(gè)對(duì)象中嵌套另一個(gè)對(duì)象或者數(shù)組。10.2.1JSON概述對(duì)象的值也可以是數(shù)組，數(shù)組中的元素也可以是對(duì)象。10.2.2JSON與JavaScriptJSON實(shí)際上只是純文本的字符串，它是不能直接在JavaScript中使用的，如果要在JavaScript中訪問(wèn)JSON數(shù)據(jù)，需要調(diào)用JSON.Parse方法將JSON字符串轉(zhuǎn)換成JavaScript對(duì)象。10.2.2JSON與JavaScriptJSON常用于在客戶端和服務(wù)器之間進(jìn)行數(shù)據(jù)交換。通常情況下，客戶端的JavaScript對(duì)象需要先轉(zhuǎn)換成JSON字符串，然后才能發(fā)送給服務(wù)器，此時(shí)可以使用JSON.stringify方法將JavaScript對(duì)象轉(zhuǎn)換為字符串。10.3本地?cái)?shù)據(jù)存儲(chǔ)技術(shù)10.3.1SessionStorageHTML5中提供了兩種在客戶端本地?cái)?shù)據(jù)存儲(chǔ)方法，一種是持久性的本地存儲(chǔ)（LocalStorage），另一種是會(huì)話級(jí)別的本地存儲(chǔ)（SessionStorage）。sessionStorage是HTML5新增的JavaScript對(duì)象，主要用于數(shù)據(jù)的臨時(shí)存儲(chǔ)，數(shù)據(jù)只在當(dāng)前瀏覽器會(huì)話期內(nèi)有效，當(dāng)用戶關(guān)閉瀏覽器窗口后會(huì)話結(jié)束，數(shù)據(jù)會(huì)自動(dòng)清除。在sessionStorage中，數(shù)據(jù)以Key-Value的形式進(jìn)行存儲(chǔ)。10.3.1SessionStoragesessionStorage方法的使用。10.3.2LocalStoragelocalStorage用于數(shù)據(jù)的持久化存儲(chǔ)，既使關(guān)閉瀏覽器，數(shù)據(jù)也不會(huì)丟失，除非用戶自己刪除數(shù)據(jù)。使用localStorage記住登錄名和密碼10.3.3WebSQLDatabaseWebSQLDatabase并不是HTML5的標(biāo)準(zhǔn)規(guī)范，它是基于sqlite數(shù)據(jù)庫(kù)技術(shù)，使用SQL操作客戶端數(shù)據(jù)庫(kù)的API，支持標(biāo)準(zhǔn)的SQLCRUD操作。雖然部分瀏覽器，如Chrome已經(jīng)實(shí)現(xiàn)了相關(guān)API，但是這一標(biāo)準(zhǔn)目前處于廢棄狀態(tài)，沒(méi)有得到官方認(rèn)為。10.3.4IndexedDBIndexedDB允許存儲(chǔ)大量數(shù)據(jù)，提供查詢接口，還能建立索引，這些功能都是LocalStorage所不具備的。就數(shù)據(jù)庫(kù)類(lèi)型而言，IndexedDB不屬于關(guān)系型數(shù)據(jù)庫(kù)（不支持SQL查詢語(yǔ)句），更接近NoSQL數(shù)據(jù)庫(kù)。內(nèi)部都是采用對(duì)象倉(cāng)庫(kù)（objectstore）進(jìn)行存儲(chǔ)，在對(duì)象倉(cāng)庫(kù)中數(shù)據(jù)以鍵值對(duì)的形式保存，每一條記錄都有對(duì)應(yīng)的主鍵；IndexedDB操作都是異步的，不會(huì)鎖死瀏覽器；IndexedDB支持事務(wù)；IndexedDB受到同源限制，每一個(gè)數(shù)據(jù)庫(kù)對(duì)應(yīng)創(chuàng)建它的域名，網(wǎng)頁(yè)只能訪問(wèn)自身域名下的數(shù)據(jù)庫(kù)，而不能訪問(wèn)跨域的數(shù)據(jù)庫(kù)；IndexedDB的儲(chǔ)存空間比LocalStorage大得多。10.3.4IndexedDBIndexedDB數(shù)據(jù)庫(kù)操作示例10.4離線應(yīng)用和客戶端緩存10.4.1離線狀態(tài)檢測(cè)離線Web應(yīng)用指設(shè)備在沒(méi)有聯(lián)網(wǎng)的情況下仍然能運(yùn)行的應(yīng)用，HTML5支持離線Web應(yīng)用開(kāi)發(fā)，包括離線狀態(tài)檢測(cè)、應(yīng)用緩存等。HTML5使用navigator.onLine屬性判斷設(shè)備在線狀態(tài)，該屬性是一個(gè)只讀屬性，它返回一個(gè)Boolean值，其中true表示設(shè)備處于在線狀態(tài)，false表示設(shè)備離線。HTML5還定義了兩個(gè)事件：online和offline。其中online事件是當(dāng)網(wǎng)絡(luò)從離線變?yōu)樵诰€時(shí)觸發(fā)，而offline事件正好相反，在網(wǎng)絡(luò)從在線變?yōu)殡x線時(shí)觸發(fā)。10.4.1離線狀態(tài)檢測(cè)設(shè)備在線/離線狀態(tài)檢測(cè)10.4.2應(yīng)用緩存HTML5應(yīng)用緩存，即ApplicationCache，是從瀏覽器的緩存中分出來(lái)的一塊緩存區(qū)。可以使用一個(gè)描述文件（manifestfile），列出要下載和緩存的資源，這樣就能在緩存區(qū)中保存數(shù)據(jù)了。要使用applicationcache，首先需要定義緩存清單文件manifest，該文件是一個(gè)采用UTF-8編碼方式編碼的文本文件，目的是告訴瀏覽器需要緩存哪些資源描述文件。10.4.2應(yīng)用緩存定義一個(gè)緩存描述文件offline.appcache定義一個(gè)緩存描述文件offline.appcache10.4.2應(yīng)用緩存創(chuàng)建緩存描述文件后，需要在web頁(yè)面中進(jìn)行引用，其基本形式為：<htmlmanifest="offline.appcache"></html>。其中文件后綴名可以自定義，早期大多使用.manifest，現(xiàn)在推薦使用.appcache。在web服務(wù)器上配置正確的MIME-type，即"text/cache-manifest"，以apache服務(wù)器為例，在apache安裝目錄下找到httpd.conf文件，添加AddTypetext/cache-manifest.appcache。上述操作完成后，就可以在應(yīng)用程序中使用applicationcache。10.4.2應(yīng)用緩存一旦應(yīng)用被緩存，它就會(huì)保持緩存直到發(fā)生下列情況：用戶清空瀏覽器緩存manifest緩存清單文