突襲HTML5之Javascript API擴展3―本地存儲全新體驗

2024-09-05 07:20:10

字體：大中小

來源：轉載

供稿：網友

為什么要存數據到客戶端？
存儲數據在客戶端可以解決很多的問題和減少不必要的傳輸數據：
1. 能保存程序的狀態：用戶關閉瀏覽器再打開后能知道他工作到哪了。
2. 能緩存數據：很多不會變化的數據根本沒必要每次都從服務端獲取。
3. 能保存用戶的喜好：這種數據通常不需要存在服務端。
以前的做法
在HTML5本地存儲之前，如果我們想在客戶端保存持久化數據，有這么幾個選擇：
1. HTTP cookie。HTTP cookie的缺點很明顯，最多只能存儲4KB的數據，每個HTTP請求都會被傳送回服務器，明文傳輸（除非你使用SSL）。
2. IE userData。userData是微軟在上世紀90年代的瀏覽器大戰時推出的本地存儲方案，借助DHTML的behaviour屬性來存儲本地數據，允許每個頁面最多存儲64K數據，每個站點最多640K數據，userData的缺點顯而易見，它不是Web標準的一部分，除非你的程序只需要支持IE，否則它基本沒什么用處。
3. Flash cookie。Flash cookie實際上和HTTP cookie并不是一回事，或許它的名字應該叫做"Flash本地存儲”，Flash cookie默認允許每個站點存儲不超過100K的數據，如果超出了，Flash會自動向用戶請求更大的存儲空間，借助Flash的 ExternalInterface接口，你可以很輕松地通過Javascript操作Flash的本地存儲。Flash的問題很簡單，就是因為它是 Flash。
4. Google Gears。Gears是Google在07年發布的一個開源瀏覽器插件，旨在改進各大瀏覽器的兼容性，Gears內置了一個基于SQLite的嵌入式 SQL數據庫，并提供了統一API對數據庫進行訪問，在取得用戶授權之后，每個站點可以在SQL數據庫中存儲不限大小的數據，Gears的問題就是 Google自己都已經不用它了。
眼花繚亂的各種技術導致的就是瀏覽器的兼容性問題。這里大家用的最多的可能就是cookie了。
HTML5中的全新體驗
針對以上的問題，HTML5中給出了更加理想的解決方案：假如你需要存儲的只是簡單的用key/value對即可解決的數據，則可以使用Web Storage。
與Cookie相比，Web Storage存在不少的優勢，概括為以下幾點：
1. 存儲空間更大：IE8下每個獨立的存儲空間為10M，其他瀏覽器實現略有不同，但都比Cookie要大很多。
2. 存儲內容不會發送到服務器：當設置了Cookie后，Cookie的內容會隨著請求一并發送的服務器，這對于本地存儲的數據是一種帶寬浪費。而Web Storage中的數據則僅僅是存在本地，不會與服務器發生任何交互。
3. 更多豐富易用的接口：Web Storage提供了一套更為豐富的接口，使得數據操作更為簡便。
4. 獨立的存儲空間：每個域（包括子域）有獨立的存儲空間，各個存儲空間是完全獨立的，因此不會造成數據混亂。
Web Storage分類
Web Storage實際上由兩部分組成：sessionStorage與localStorage。
sessionStorage用于本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問并且當會話結束后數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
localStorage用于持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。
檢查是否支持Web Storage
Web Storage在各大主流瀏覽器中都支持了，但是為了兼容老的瀏覽器，還是要檢查一下是否可以使用這項技術。
第一種方式：通過檢查Storage對象是否存在來檢查瀏覽器是否支持Web Storage：

復制代碼

上一篇：突襲HTML5之Javascript API擴展2―地理信息服務及地理位置API學習

下一篇：突襲HTML5之Javascript API擴展4―拖拽(Drag/Drop)概述