黃有福

摘要：HTML5 WebStorage API 能很方便地在Web請求之間持久化數(shù)據(jù)，開發(fā)者可以將需要跨請求重復(fù)訪問的數(shù)據(jù)直接存儲在客戶端的瀏覽器中，還可以在關(guān)閉瀏覽器很久后再次打開時恢復(fù)數(shù)據(jù)，以減小網(wǎng)絡(luò)流量。通過比較.NET的會話機制與HTML5 WebStorage API，探索兩者在Web客戶端的應(yīng)用。

關(guān)鍵詞：WebStorage；離線緩存；會話；Session

中圖分類號：TP393 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2013）09-2102-03

HTML5近十年來發(fā)展迅猛，在HTML 5平臺上，視頻，音頻，圖像，動畫，以及同電腦的交互都被標(biāo)準(zhǔn)化。HTML5功能越來越豐富，支持圖片上傳拖拽、支持localstorage、支持web SQL database、支持文件存儲API等等。在PC的WEB開發(fā)過程中，.NET的會話機制在各方面都表現(xiàn)很好，然而在基于智能移動終端的開發(fā)過程中， HTML5的Web localStorage有著極大的優(yōu)勢，下面主要從HTML5 WebStorage API的基本原理和操作方法入手，比較.NET的對話機制，以手機招生信息網(wǎng)的用戶緩存進(jìn)行分析，如何使用用戶服務(wù)更省流量，更快捷地訪問頁面。

1 HTML5 WebStorage API概述

在HTML5之前，各種瀏覽器都能很好的支持Cookie，因為可以直接使用JS就可以調(diào)用，使用很方便。但是Cookie本身就不是很完善，主要表現(xiàn)在二個方面：一是存儲大小受限，一個Cookie大小大概在4KB左右，又有訪問時間的限制，這就不能接受你文件或郵件那樣的大文件了，因此用戶在使用的過程中就很大的不便。二是安全的問題，因為用戶請求頁面的時候，Cookie就要在服務(wù)器和瀏覽器之間來回傳送，Cookie都會被附加在每個HTTP請求的Header中，增加用戶流量，況且傳遞的過程中是使用明文，用戶的信息容易受到跨站的腳本攻擊，如果沒有對信息加密，只需要在鏈接地址后面加上“？cookie=document. Cookie”便可以獲取用戶的Cookie信息，用戶數(shù)據(jù)就存很大的威脅。

HTML5的 Web Storage（也稱為DOMStorage） API的出現(xiàn)能很好的解決這個問題，Web Storage API 是用JavaScript來保存對象，在頁面中加載時讀取和保存數(shù)據(jù)都比較容易，開發(fā)者可以為應(yīng)用創(chuàng)建本地存儲，由于存儲的數(shù)據(jù)不在網(wǎng)絡(luò)上傳輸，重新啟動瀏覽器時更加容易獲取，而且可以保存5M左右的數(shù)據(jù)，又能長期保存。這樣極大的便解決了之前只能用Cookie來存儲數(shù)據(jù)的容量小、存取不便、容易被清除的問題，這個功能為客戶端提供了極大的靈活性，并能快速地讀取到數(shù)據(jù)，減少了用戶等待和數(shù)據(jù)流量。

2 HTML5 WebStorage API的使用

2.1 檢查瀏覽器的支持性

目前有部分瀏覽器不能支持HTML5，因些在使用之前，需要檢查瀏覽器是否支持Web Storage API ，去檢查window. LocalStorage或window.SessionStorage是否存在，實際操作過程中，使用如下程序可以檢查瀏覽器是否支持Web Storage。

通過測試，目前主流瀏覽器都支持Web Storage，基本支持HTML5的都能很好的支持，瀏覽器支持情況如表1所示。

2.2 LocalStorage與Session Storage的區(qū)別

HTML5 WebStorage API 能支持離線緩存，主要是提供了兩種存儲類型API接口：sessionStorage和localStorage。其中l(wèi)ocalStorage 作為HTML5本地存儲WebStorage特性的API之一，主要作用時將數(shù)據(jù)保存在客戶端中，在安全性方面，localStorage是域內(nèi)安全的，即localStorage是基于域的，任何在該域內(nèi)的所有頁面，都可以訪問localStorage數(shù)據(jù)。 而sessionStorage主要是將數(shù)據(jù)保存到會話中， 它的存儲的生命周期只保存在存儲它的當(dāng)前窗口或由當(dāng)前窗口新建的新窗口，直到相關(guān)聯(lián)的標(biāo)簽頁。sessionStorage的生命周期在會話期間內(nèi)有效，而localStorage就存儲在本地，并且數(shù)據(jù)是永久的，除非用戶或程序?qū)ζ鋱?zhí)行刪除操作。

2.3 HTML5 WebStorage API數(shù)據(jù)的獲取

在HTML5中，可以定義Web Storage的API，通過Window對象來獲取他們，程序如下：

從規(guī)范定義的接口來看，接口數(shù)量并不多，只有l(wèi)ength是屬性，其余都是方法。其中setItem和getItem互為以對get/set。removeItem方法的主要作用是刪除一個鍵值對。clear的作用是刪除所有的鍵值對。

3 .NET對應(yīng)的會話機制

在HTML5開發(fā)過程中，我們經(jīng)常會遇到這樣的問題，當(dāng)信息系統(tǒng)中需要禁止重復(fù)登陸的功能，通常做法是在數(shù)據(jù)庫中建一個記錄當(dāng)前使用人員的表，在用戶身份驗證完成后對照該表，如果用戶存在在這個表中，按具體需求可以實現(xiàn)禁止當(dāng)前用戶登陸，或強制先前用戶注銷。如果用戶不存在在這個表中，將用戶信息保存到該表，在用戶退出，或者session結(jié)束時清除表中數(shù)據(jù)。但是，我們經(jīng)常會遇到這樣的問題：如果采用禁止當(dāng)前用戶登陸的方法，當(dāng)用戶出現(xiàn)意外關(guān)閉，用戶如何刪除掉已登錄的記錄，如果不刪除，下次該用戶就無法登錄了。在.net的會話機制中，為了減少這個問題的發(fā)生，常常使用所提供的三種會話狀態(tài)存儲機制。一種進(jìn)程內(nèi)模式（問題模式），會話狀態(tài)存儲在進(jìn)程內(nèi)；兩種進(jìn)程外模式：狀態(tài)機模式，會話狀態(tài)村處于網(wǎng)絡(luò)狀態(tài)服務(wù)器；sql server模式，會話狀態(tài)存儲于sql server中。

4 HTML5 WebStorage API構(gòu)建與.NET對應(yīng)的會話機制

4.1 .net的session會話機制

當(dāng)我們的HTML5客戶端應(yīng)用程序要與.Net的后臺程序?qū)由系臅r候，就要構(gòu)建與之對應(yīng)的會話機制，這樣才能達(dá)成一致的操作。下面以做一個測試，在項目中使用Visual stdio創(chuàng)建兩個.aspx頁面，其中一個為NO1.aspx，另一個為NO2.aspx，在設(shè)計過程中使用同一個Session，用session[“Name”]表示。測試結(jié)果如下在One頁面保存Session["Name"]的值為hyfu，如圖1所示， Two頁面中顯示也是hyfu，結(jié)果如圖2所示：

從上面的運行結(jié)果可以看出，在.net的session會話機制中，它是由服務(wù)器端創(chuàng)建的，并且在客戶訪問時會把session信息放到http頭中發(fā)送出去的，在服務(wù)端由于已經(jīng)保存了session的相關(guān)信息，所以在下一次訪問時，session的值會傳送到客戶端，保存用戶信息。

4.2 WebStorage處理會話機制

在離線系統(tǒng)的設(shè)計中，我們經(jīng)常采用localStorage處理機制，因為它的數(shù)據(jù)的生命周期比窗口或瀏覽器的生命周期長，在頁面中一般的JS對象或數(shù)據(jù)的生存期是僅在當(dāng)前頁面有效，因此刷新頁面或轉(zhuǎn)到另一頁面這樣的重新加載頁面的情況，數(shù)據(jù)就不存在了。而WebStorage 只要同源的同窗口（或tab）中，刷新頁面或進(jìn)入同源的不同頁面，數(shù)據(jù)始終存在。也就是說只要這個瀏覽器窗口沒有關(guān)閉，加載新頁面或重新加載，數(shù)據(jù)仍然存在，所以在頁面設(shè)計中，我們采用localStorage記錄會話機制，例如使用：window.localStorage.setItem（"sessionMechanism"， username）； 實現(xiàn)記錄用戶登錄信息，使用storage事件監(jiān)聽會話的變化。例如使用window.addEventListener（"storage"， checkStorageEvent， true）；語句，則在表單頁面設(shè)置事件的監(jiān)聽。下面我們以手機招生信息網(wǎng)為例進(jìn)行分析，首先我們設(shè)計一個用戶登錄頁面，在頁面中寫入“window.localStorage.setItem（"sessionusename"， username）；”保存用戶信息，我們在程序中設(shè)置localStorage監(jiān)聽事件，如當(dāng)輸入用戶信息時，運行結(jié)果如圖3所示，當(dāng)輸入正確的信息，點擊登錄則進(jìn)入用戶詳細(xì)信息頁面，效果如圖4所示。

當(dāng)用戶在當(dāng)面窗口重新輸入別的用戶名和密碼時，系統(tǒng)會彈出提示信息，并跳轉(zhuǎn)到登錄的界面，這樣就保證了一個同源瀏覽器只有一個用戶在執(zhí)行操作。

5 結(jié)束語

參考文獻(xiàn)：

[1] 張亞飛.Android、iPhone、Windows Phone手機網(wǎng)頁及網(wǎng)站設(shè)計[M].北京：清華大學(xué)出版社，2011.

[2] 郭少豪.創(chuàng)意之鑰——Android手機交互應(yīng)用開發(fā)[M]. 北京：中國鐵道出版社，2011.

[3] 陶國榮.HTML5實踐[M]. 北京：機械工業(yè)出版社，2012.

[4] Peter Lubbers，Brian Alian. HTML5程序設(shè)計[M]. 柳靖，李杰，劉淼，譯. 2版.北京：人民郵電出版社， 2012.