Web應用的發展,使得客戶端儲存使用得也越來越多,而實現客戶端儲存的方式則是多種多樣。最簡單且相容性最佳的方案是Cookie,但是作為真正的客戶端存儲,Cookie則存在許多致命傷。此外,在IE6以上版本中還可以使用userData Behavior 、在Firefox下可以使用globalStorage 、在有Flash插件的環境中可以使用Flash Local Storage ,但是這幾種方式都存在兼容性方面的局限性,因此真正使用起來並不理想。針對以上情況,HTML5中給出了更理想的解決方案:假如你需要儲存複雜的資料則可以使用Web Database ,可以像客戶端程式一樣使用SQL(不過Web Database標準目前正陷於僵局之中,而且目前已經實現的瀏覽器很有限);如果你需要儲存的只是簡單的用key/value對即可解決的資料則可以使用Web Storage 。 本文主要從各方面介紹一下Web Storage的具體情況。
sessionStorage與localStorage
Web Storage實際上由兩部分組成:sessionStorage與localStorage。
sessionStorage用於本地儲存一個會話(session)中的數據,這些數據只有在同一個會話中的頁面才能存取並且當會話結束後數據也隨之銷毀。因此sessionStorage不是持久的本機存儲,只是會話層級的儲存。
localStorage用於持久化的本地存儲,除非主動刪除數據,否則數據是永遠不會過期的。
為什麼選擇Web Storage而不是Cookie?
與Cookie相比,Web Storage存在不少的優勢,概括為以下幾點:
1. 儲存空間較大:IE8下每個獨立的儲存空間為10M,其他瀏覽器實作略有不同,但都比Cookie大很多。
2. 儲存內容不會傳送到伺服器:當設定了Cookie後,Cookie的內容會隨著請求一併發送的伺服器,這對於本地儲存的資料是一種頻寬浪費。而Web Storage中的資料則只是存在本地,不會與伺服器發生任何互動。
3. 更多豐富易用的介面:Web Storage提供了一套更為豐富的接口,使得資料操作更為簡單。
4. 獨立的儲存空間:每個域(包括子域)都有獨立的儲存空間,且各個儲存空間是完全獨立的,因此不會造成資料混亂。
相容性如何?
接下來的各種測試是在以下瀏覽器中進行的:IE8、Firefox3.6、Chrome5、Safari4、Opera10,事實證明各個瀏覽器在API方面的實現基本上一致,存在一定的兼容性問題,但不影響正常的使用。
sessionStorage測試
本節主要針對sessionStorage的一些特性進行了測試,測試的重點在於各個瀏覽器對於session的定義以及跨域情況。測試方法很簡單:打開頁面A ,在頁面A中寫入當前的session數據,然後透過頁面A中的連結或按鈕使用不同的方式進入下頁面B,如果頁面B中能夠存取到頁面A中的數據則表示瀏覽器將目前情況的頁面A、B視為同一個session。測試的具體結果如表1:
表1 sessionStorage相容性測試
從表1可以看出,處於安全性考慮所有瀏覽器下session資料都是不允許跨域存取的,包括跨子域也是不允許的。其他方面主流瀏覽器中的實作較為一致。