HTML5+CSS3網(wǎng)頁設(shè)計(jì)基礎(chǔ)教程第7章-本地存儲(chǔ)

1、第1頁第7章 本地存儲(chǔ)本章概述 本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第2頁本章概述HTML5為客戶端存儲(chǔ)數(shù)據(jù)提出了理想的解決方案：如果存儲(chǔ)復(fù)雜的數(shù)據(jù)，可以使用Web Database，該方法可以像客戶端程序一樣使用SQL語句對(duì)數(shù)據(jù)庫進(jìn)行操作；如果只是存儲(chǔ)簡單的Key/Value鍵值對(duì)，可以使用Web存儲(chǔ)。本章將從個(gè)方便介紹Web存儲(chǔ)和Web Database的使用。第3頁本章的學(xué)習(xí)目標(biāo)理解Cookie存儲(chǔ)機(jī)制的優(yōu)缺點(diǎn)，從而了解為什么要用Web存儲(chǔ)；掌握使用Web存儲(chǔ)的方法，如檢查瀏覽器的兼容性、設(shè)置和獲取數(shù)據(jù)、放置數(shù)據(jù)泄露、Web存儲(chǔ)事件監(jiān)測等；掌握本地?cái)?shù)據(jù)庫的使用，包括本地?cái)?shù)據(jù)庫的基本概念、執(zhí)行查詢等 ；

2、掌握indexedDB數(shù)據(jù)庫的使用，包括數(shù)據(jù)庫連接、數(shù)據(jù)庫版本更新、創(chuàng)建對(duì)象倉庫、創(chuàng)建索引、使用事務(wù)、保存數(shù)據(jù)、獲取數(shù)據(jù)、檢索數(shù)據(jù)、統(tǒng)計(jì)操作等。第4頁主要內(nèi)容7.1 Web存儲(chǔ) 7.2 使用Web存儲(chǔ) 7.3 本地?cái)?shù)據(jù)庫7.4 本章小結(jié) 第5頁7.1 Web存儲(chǔ) 7.1.1 Cookie存儲(chǔ)機(jī)制的優(yōu)缺點(diǎn)7.1.2 為什么要用Web存儲(chǔ)7.1.3 Web存儲(chǔ)的優(yōu)缺點(diǎn)第6頁7.1.1 Cookie存儲(chǔ)機(jī)制的優(yōu)缺點(diǎn)使用Cookie存儲(chǔ)信息的優(yōu)點(diǎn)有：簡單易用，瀏覽器負(fù)責(zé)發(fā)送數(shù)據(jù)，且自動(dòng)管理不同站點(diǎn)的Cookie。使用Cookie保存信息的缺點(diǎn)有：安全性差，存儲(chǔ)容量只有4KB，且存儲(chǔ)的鍵值對(duì)數(shù)量有限；用

3、戶可以將瀏覽器設(shè)置為禁用Cookie；另外，由于Cookie由請(qǐng)求來傳遞，因此傳遞大量數(shù)據(jù)時(shí)，效率顯得極低下。第7頁7.1.2 為什么要用Web存儲(chǔ)Web Storage存儲(chǔ)機(jī)制比傳統(tǒng)的Cookie更加強(qiáng)大，彌補(bǔ)了Cookie的許多缺點(diǎn)，主要在兩方面做了加強(qiáng)：第一，Web Storage提供了簡單易用的API接口，只需設(shè)置鍵值即可；第二，在存儲(chǔ)容量方面可以根據(jù)用戶分配的磁盤配額進(jìn)行存儲(chǔ)，能夠在每個(gè)用戶域存儲(chǔ)5MB10MB的內(nèi)容，用戶不僅可以存儲(chǔ)session，還可以存儲(chǔ)許多信息，如設(shè)置偏好、本地化的數(shù)據(jù)和離線數(shù)據(jù)等。Web Storage還提供了使用JavaScript編程的接口，開發(fā)者可以使

4、用JavaScript客戶端腳本實(shí)現(xiàn)許多以前只能在服務(wù)器端才能完成的工作。第8頁7.1.3 Web存儲(chǔ)的優(yōu)缺點(diǎn)Web存儲(chǔ)的優(yōu)點(diǎn)有以下幾點(diǎn)：存儲(chǔ)空間更大：IE8下每個(gè)獨(dú)立的存儲(chǔ)空間為10M，其他瀏覽器實(shí)現(xiàn)略有不同，但都比Cookie要大很多。存儲(chǔ)內(nèi)容不會(huì)發(fā)送到服務(wù)器：當(dāng)設(shè)置了Cookie后，Cookie的內(nèi)容會(huì)隨著請(qǐng)求一并發(fā)送的服務(wù)器，這對(duì)于本地存儲(chǔ)的數(shù)據(jù)是一種帶寬浪費(fèi)。而Web Storage中的數(shù)據(jù)則僅僅是存在本地，不會(huì)與服務(wù)器發(fā)生任何交互。更多豐富易用的接口：Web Storage提供了一套更為豐富的接口，使得數(shù)據(jù)操作更為簡便。獨(dú)立的存儲(chǔ)空間：每個(gè)域（包括子域）有獨(dú)立的存儲(chǔ)空間，各個(gè)存儲(chǔ)空

5、間是完全獨(dú)立的，因此不會(huì)造成數(shù)據(jù)混亂。Web存儲(chǔ)的不足之處在于：瀏覽器為每個(gè)與分配獨(dú)立的存儲(chǔ)空間，不同域的存儲(chǔ)空間不能交叉訪問，但是在域B中嵌入域A的腳本依然可以訪問域B中的數(shù)據(jù)；存儲(chǔ)在本地的數(shù)據(jù)未加密，容易造成隱私泄露。第9頁主要內(nèi)容7.1 Web存儲(chǔ) 7.2 使用Web存儲(chǔ) 7.3 本地?cái)?shù)據(jù)庫7.4 本章小結(jié) 第10頁7.2 使用Web存儲(chǔ) 7.2.1 檢查瀏覽器的支持性7.2.2 設(shè)置和獲取數(shù)據(jù)7.2.3 Web存儲(chǔ)的其他操作7.2.4 Web存儲(chǔ)事件監(jiān)測7.2.5 制作簡單的網(wǎng)頁皮膚7.2.6 網(wǎng)站人氣值和在線人數(shù)統(tǒng)計(jì)第11頁7.2.1 檢查瀏覽器的支持性檢查瀏覽器對(duì)Web存儲(chǔ)的支持性

6、。if (typeof(Storage) = undefined) document.write(您的瀏覽器不支持Web存儲(chǔ)); else document.write(您的瀏覽器可以使用Web存儲(chǔ));第12頁7.2.2 設(shè)置和獲取數(shù)據(jù)設(shè)置數(shù)據(jù)的語法格式如下：window.sessionStorage.setItem(myFirstKey,myFirstValue);獲取數(shù)據(jù)的語法格式如下：alert(window.sessionStorage.getItem(myFirstKey);第13頁7.2.3 Web存儲(chǔ)的其他操作獲取對(duì)象的長度：使用length屬性獲取目前Storage對(duì)象中存儲(chǔ)的

7、鍵值對(duì)的數(shù)量。注意的是，Storage對(duì)象是同源的，因此Storage對(duì)象的長度只反映同源情況下的長度。獲取指定位置的鍵：通過key(index)方法獲取一個(gè)指定位置的鍵。刪除數(shù)據(jù)項(xiàng)：通過removeItem(key)刪除數(shù)據(jù)項(xiàng)。如果數(shù)據(jù)存儲(chǔ)在鍵參數(shù)下，則調(diào)用此函數(shù)會(huì)將相應(yīng)的數(shù)據(jù)項(xiàng)刪除。如果鍵參數(shù)沒有對(duì)應(yīng)數(shù)據(jù)，則不會(huì)執(zhí)行任何操作。清除所有數(shù)據(jù)：通過clear()函數(shù)刪除存儲(chǔ)列表中的所有數(shù)據(jù)。第14頁7.2.4 Web存儲(chǔ)事件監(jiān)測在HTML5中，可以通過window對(duì)象的storage事件進(jìn)行監(jiān)聽并指定其事件處理函數(shù)的方法來定義當(dāng)其在其他頁面中修改sessionStorage或localStor

8、age中的值時(shí)所要執(zhí)行的處理，代碼如下：window.addEventListener(storage,function() /當(dāng)sessionStorage或localStorage中的值發(fā)生變動(dòng)時(shí)所要執(zhí)行的處理 ,false); 第15頁7.2.5 制作簡單的網(wǎng)頁皮膚在訪問網(wǎng)站的時(shí)候，可以經(jīng)?？吹剑恍┚W(wǎng)站允許用戶選擇自己喜歡的主題風(fēng)格，當(dāng)再次登錄的時(shí)候，網(wǎng)站將為該用戶顯示上次設(shè)置的主題風(fēng)格，這樣的主題風(fēng)格被稱為“皮膚”。在網(wǎng)頁設(shè)計(jì)中，一般用JavaScript動(dòng)態(tài)設(shè)計(jì)網(wǎng)頁皮膚。對(duì)于皮膚配置數(shù)據(jù)，就可以使用localStorage存儲(chǔ)。這樣，當(dāng)用戶再次登錄訪問的時(shí)候，程序?qū)⒆詣?dòng)調(diào)用loca

9、lStorage數(shù)據(jù)來設(shè)置恢復(fù)頁面樣式?！?-3】制作簡單的網(wǎng)頁皮膚。第16頁7.2.6 網(wǎng)站人氣值和在線人數(shù)統(tǒng)計(jì)網(wǎng)站顯示著人氣值或當(dāng)前在線人數(shù)。其實(shí)實(shí)現(xiàn)原理大多是基于會(huì)話的統(tǒng)計(jì)。使用sessionStorage就可以作為會(huì)話計(jì)數(shù)器，localStorage則可以作為Web應(yīng)用訪問計(jì)數(shù)器。聲明一個(gè)localStorage計(jì)數(shù)變量，當(dāng)刷新頁面時(shí)，會(huì)看到計(jì)數(shù)器數(shù)值在增加。關(guān)閉瀏覽器窗口，然后重新打開，計(jì)數(shù)器還會(huì)在原來的基礎(chǔ)上繼續(xù)增加。而sessionStorage計(jì)數(shù)變量只能夠在當(dāng)前會(huì)話期間顯示頁面的訪問量，刷新頁面會(huì)看到計(jì)數(shù)器在增長，當(dāng)關(guān)閉瀏覽器時(shí)，然后再重新打開，計(jì)數(shù)器將被清除。【例7-4】網(wǎng)

10、站人氣值和在線人數(shù)統(tǒng)計(jì)。第17頁主要內(nèi)容7.1 Web存儲(chǔ) 7.2 使用Web存儲(chǔ) 7.3 本地?cái)?shù)據(jù)庫7.4 本章小結(jié) 第18頁7.3 本地?cái)?shù)據(jù)庫7.3.1 本地?cái)?shù)據(jù)庫的基本概念7.3.2 用executeSql來執(zhí)行查詢7.3.3 創(chuàng)建一個(gè)簡單的數(shù)據(jù)庫7.3.4 綜合應(yīng)用點(diǎn)評(píng)功能第19頁7.3.1 本地?cái)?shù)據(jù)庫的基本概念在HTML5中，可以向訪問本地文件那樣輕松對(duì)內(nèi)置數(shù)據(jù)庫進(jìn)行直接訪問。HTML5中內(nèi)置了兩種本地?cái)?shù)據(jù)庫，一種是本節(jié)介紹的SQLLite，可以通過SQL語言來訪問的文件型SQL數(shù)據(jù)庫，另一種是被稱為indexedDB的NoSQL類型的數(shù)據(jù)庫。本書限于篇幅，僅對(duì)第一種數(shù)據(jù)庫進(jìn)行介紹。

11、對(duì)NoSQL感興趣的讀者可以閱讀其他相關(guān)資料。要在JavaScript腳本中使用SQLLite數(shù)據(jù)庫，有兩個(gè)必要步驟：（1）創(chuàng)建和訪問數(shù)據(jù)庫對(duì)象。（2）使用事務(wù)對(duì)數(shù)據(jù)庫進(jìn)行操作。第20頁7.3.2 用executeSql來執(zhí)行查詢?cè)趖ransaction的回調(diào)函數(shù)內(nèi)如何訪問數(shù)據(jù)庫。這里使用了作為參數(shù)傳遞給回調(diào)函數(shù)的transaction對(duì)象的executeSql方法，使用格式如下：transaction.executeSql(sqlquery,dataHandler,errorHandler);第21頁7.3.3 創(chuàng)建一個(gè)簡單的數(shù)據(jù)庫var db = openDatabase(db,1.0,T

12、estDB,2*1024*1024);var msg;db.transaction(function(tx)tx.executeSql(CREATE TABLE IF NOT EXISTS logs(id unique,log);tx.executeSql(INSERT INTO logs(id,log) VALUES(1,foobar);tx.executeSql(INSERT INTO logs(id,log) VALUES(2,logmsg);msg = 完成消息創(chuàng)建和插入行操作。;document.querySelector(#status).innerHTML = msg;);db.

13、transaction(function(tx) tx.executeSql(SELECT * FROM logs,function(tx,results)var len = results.rows.length,i;msg = 查詢行數(shù)：+len+;document.querySelector(#status).innerHTML += msg;for(i=0;ilen;i+)msg=+results.rows.item(i).log + ;document.querySelector(#status).innerHTML += msg;,null););第22頁7.3.4 綜合應(yīng)用點(diǎn)評(píng)功能詳見【例7-8】簡單點(diǎn)評(píng)功能。第23頁主要內(nèi)容7.1 Web存