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

2024-08-26 00:14:52

字體：大中小

來源：轉載

供稿：網友

為什么要存數據到客戶端？
存儲數據在客戶端可以解決很多的問題和減少不必要的傳輸數據：
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：

復制代碼代碼如下:www.CuoXIn.com

 
if(typeof(Storage)!=="undefined"){ 
// Yes! localStorage and sessionStorage support! 
// Some code..... 
} else { 
// Sorry! No web storage support.. 
} 

第二種方式就是分別檢查各自的對象，例如檢查localStorage是否支持：

復制代碼代碼如下:www.CuoXIn.com

 
if (typeof(localStorage) == 'undefined' ) { 
alert('Your browser does not support HTML5 localStorage. Try upgrading.'); 
} else { 
// Yes! localStorage and sessionStorage support! 
// Some code..... 
} 
或者： 
if('localStorage' in window && window['localStorage'] !== null){ 
// Yes! localStorage and sessionStorage support! 
// Some code..... 
} else { 
alert('Your browser does not support HTML5 localStorage. Try upgrading.'); 
} 
或者 
if (!!localStorage) { 
// Yes! localStorage and sessionStorage support! 
// Some code..... 
} else { 
alert('Your browser does not support HTML5 localStorage. Try upgrading.'); 
} 

很顯然第一個方式最直接，也最簡單。
Web Storage的使用
Web Storage中存儲的是鍵值對，而且瀏覽器會以字符串方式存儲。記住在必要的時候將他們轉為其他格式。
sessionStorage與localStorage除了用途不同外，成員列表是一樣的：

復制代碼代碼如下:www.CuoXIn.com

 
key = value: 存貯鍵值對 
setItem(key, value): 存貯鍵值對 
getItem(key): 取鍵值對 
removeItem(key)：移除所有鍵值對 
clear()：清空所有鍵值對 
length：鍵值對的數目 

這里還是要強調一下：setItem(key,value)方法中的value類型，理論上可以是任意類型，不過實際上瀏覽器會調用value的toString方法來獲取其字符串值并存儲到本地，因此如果是自定義的類型則需要自己定義有意義的toString方法。例如下面的例子結合JSON.stringify使用：

復制代碼代碼如下:www.CuoXIn.com

 
var person = {'name': 'rainman', 'age': 24}; 
localStorage.setItem("me", JSON.stringify(person)); 
JSON.parse(localStorage.getItem('me')).name; // 'rainman' 
/** 
* JSON.stringify，將JSON數據轉化為字符串 
* JSON.stringify({'name': 'fred', 'age': 24}); // '{"name":"fred","age":24}' 
* JSON.stringify(['a', 'b', 'c']); // '["a","b","c"]' 
* JSON.parse，反解JSON.stringify 
* JSON.parse('["a","b","c"]') // ["a","b","c"] 
*/ 

此外，添加鍵值對的時候，如果添加的數量比較多，比較保險的做法是去檢查是否有超出限額的異常：

復制代碼代碼如下:www.CuoXIn.com

 
try { 
localStorage.setItem(itemId, values.join(';')); 
} catch (e) { 
if (e == QUOTA_EXCEEDED_ERR) { 
alert('Quota exceeded!'); 
} 
} 

Web Storage的方法非常簡單，下面的示例是統計button點擊的次數的：

復制代碼代碼如下:www.CuoXIn.com

 
<!DOCTYPE html> 
<html> 
<head> 
<script> 
function clickCounter() 
{ 
if(typeof(Storage)!=="undefined") 
{ 
if (localStorage.clickcount) 
{ 
localStorage.clickcount=Number(localStorage.clickcount)+1; 
} 
else 
{ 
localStorage.clickcount=1; 
} 
document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s)."; 
} 
else 
{ 
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage..."; 
} 
} 
</script> 
</head> 
<body> 
<p><button onclick="clickCounter()" type="button">Click me!</button></p> 
<div id="result"></div> 
<p>Click the button to see the counter increase.</p> 
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p> 
</body> 
</html> 

在上面的例子中，你可以把localStorage換成sessionStorage，點擊幾次button然后驗證在關閉瀏覽器前后的效果。
存在的問題
Web Storage的缺陷主要集中在其安全性方面，具體體現在以下兩點：
1. 瀏覽器會為每個域分配獨立的存儲空間，即腳本在域A中是無法訪問到域B中的存儲空間的，但是瀏覽器卻不會檢查腳本所在的域與當前域是否相同。即在域B中嵌入域A中的腳本依然可以訪問域B中的數據。
2. 存儲在本地的數據未加密而且永遠不會過期，極易造成隱私泄漏。
此外，更多的安全相關的問題請參看后面實用參考中的鏈接。
其他規范一覽(僅供了解，說不定什么時候就沒了)
Web Database
在老的HTML5提議中，假如你需要存儲復雜的數據則可以使用Web Database，可以像客戶端程序一樣使用SQL（Web Database標準已被廢棄，這里就是簡單提一下）；
globalStorage
這個也是html5中提出來，在瀏覽器關閉以后，使用globalStorage存儲的信息仍能夠保留下來，localStorage一樣，域中任何一個頁面存儲的信息都能被所有的頁面共享，不過目前只有FireFox支持。
基本語法:
• globalStorage['developer.mozilla.org'] —— 在developer.mozilla.org下面所有的子域都可以通過這個命名空間存儲對象來進行讀和寫。
• globalStorage['mozilla.org'] —— 在mozilla.org域名下面的所有網頁都可以通過這個命名空間存儲對象來進行讀和寫。
• globalStorage['org'] —— 在.org域名下面的所有網頁都可以通過這個命名空間存儲對象來進行讀和寫。
• globalStorage[''] —— 在任何域名下的任何網頁都可以通過這個命名空間存儲對象來進行讀和寫
方法屬性:
• setItem(key, value) —— 設置或重置 key 值。
• getItem(key) —— 獲取 key 值。
• removeItem(key) —— 刪除 key 值。
• 設置 key 值：window.globalStorage["planabc.net"].key = value;
• 獲取 key 值：value = window.globalStorage["planabc.net"].key;
其它特征:
• 過期時間同 localStorage，其它的一些特性也和localStorage相似。
• 現在Firefox只支持當前域下的globalStorage存儲，如果使用公用域會導致一個這樣一個類似的錯誤“Security error” code: “1000”。
IndexedDB
最后我們要介紹的就是IndexedDB了，相比其他兩個規范，目前只有Firefox實現了IndexedDB（順便提一下，Mozilla表示它們永遠不會去實現Web SQL Database），不過Google已經表示正在考慮在Chrome中加入IndexDB支持。
IndexedDB引入了一個object store的概念，這有點像是一個SQL Database，你可以在“數據庫”中存儲“記錄”，并且每條“記錄”可以擁有很多“字段"，每個字段都有一個特定的數據類型，你可以選擇記錄的子集，并使用“光標”進行遍歷，同時object store中的所有變更都是基于“事務”的。
更多的信息參看后面使用參考中講述FireFox中IndexedDB的文檔。
實用參考：
官方文檔：http://www.w3schools.com/html5/
模板無憂：http://www.CuoXIn.com/w3school/html5/
本地存儲的安全性：http://www.mhtml5.com/2012/03/4586.html
FireFox的實驗特性IndexedDB:https://developer.mozilla.org/en-US/docs/IndexedDB

上一篇：html5的新增的標簽和廢除的標簽簡要概述

下一篇：如何讓IE9以下版本(ie6/7/8)認識html5元素