突襲HTML5之Javascript API擴(kuò)展3—本地存儲全新體驗(yàn)

字號:


    存儲數(shù)據(jù)在客戶端可以解決很多的問題和減少不必要的傳輸數(shù)據(jù): 能保存程序的狀態(tài)/ 能緩存數(shù)據(jù)/能保存用戶的喜好等等以前的做法是很繁笨的,接下來將詳細(xì)介紹感興趣的朋友可以了解下,或許對你有所幫助
    為什么要存數(shù)據(jù)到客戶端?
    存儲數(shù)據(jù)在客戶端可以解決很多的問題和減少不必要的傳輸數(shù)據(jù):
    1. 能保存程序的狀態(tài):用戶關(guān)閉瀏覽器再打開后能知道他工作到哪了。
    2. 能緩存數(shù)據(jù):很多不會變化的數(shù)據(jù)根本沒必要每次都從服務(wù)端獲取。
    3. 能保存用戶的喜好:這種數(shù)據(jù)通常不需要存在服務(wù)端。
    以前的做法
    在HTML5本地存儲之前,如果我們想在客戶端保存持久化數(shù)據(jù),有這么幾個選擇:
    1. HTTP cookie。HTTP cookie的缺點(diǎn)很明顯,最多只能存儲4KB的數(shù)據(jù),每個HTTP請求都會被傳送回服務(wù)器,明文傳輸(除非你使用SSL)。
    2. IE userData。userData是微軟在上世紀(jì)90年代的瀏覽器大戰(zhàn)時推出的本地存儲方案,借助DHTML的behaviour屬性來存儲本地數(shù)據(jù), 允許每個頁面最多存儲64K數(shù)據(jù),每個站點(diǎn)最多640K數(shù)據(jù),userData的缺點(diǎn)顯而易見,它不是Web標(biāo)準(zhǔn)的一部分,除非你的程序只需要支持IE, 否則它基本沒什么用處。
    3. Flash cookie。Flash cookie實(shí)際上和HTTP cookie并不是一回事,或許它的名字應(yīng)該叫做"Flash本地存儲”,F(xiàn)lash cookie默認(rèn)允許每個站點(diǎn)存儲不超過100K的數(shù)據(jù),如果超出了,F(xiàn)lash會自動向用戶請求更大的存儲空間,借助Flash的 ExternalInterface接口,你可以很輕松地通過Javascript操作Flash的本地存儲。Flash的問題很簡單,就是因?yàn)樗?Flash。
    4. Google Gears。Gears是Google在07年發(fā)布的一個開源瀏覽器插件,旨在改進(jìn)各大瀏覽器的兼容性,Gears內(nèi)置了一個基于SQLite的嵌入式 SQL數(shù)據(jù)庫,并提供了統(tǒng)一API對數(shù)據(jù)庫進(jìn)行訪問,在取得用戶授權(quán)之后,每個站點(diǎn)可以在SQL數(shù)據(jù)庫中存儲不限大小的數(shù)據(jù),Gears的問題就是 Google自己都已經(jīng)不用它了。
    眼花繚亂的各種技術(shù)導(dǎo)致的就是瀏覽器的兼容性問題。這里大家用的最多的可能就是cookie了。
    HTML5中的全新體驗(yàn)
    針對以上的問題,HTML5中給出了更加理想的解決方案:假如你需要存儲的只是簡單的用key/value對即可解決的數(shù)據(jù),則可以使用Web Storage。
    與Cookie相比,Web Storage存在不少的優(yōu)勢,概括為以下幾點(diǎn):
    1. 存儲空間更大:IE8下每個獨(dú)立的存儲空間為10M,其他瀏覽器實(shí)現(xiàn)略有不同,但都比Cookie要大很多。
    2. 存儲內(nèi)容不會發(fā)送到服務(wù)器:當(dāng)設(shè)置了Cookie后,Cookie的內(nèi)容會隨著請求一并發(fā)送的服務(wù)器,這對于本地存儲的數(shù)據(jù)是一種帶寬浪費(fèi)。而Web Storage中的數(shù)據(jù)則僅僅是存在本地,不會與服務(wù)器發(fā)生任何交互。
    3. 更多豐富易用的接口:Web Storage提供了一套更為豐富的接口,使得數(shù)據(jù)操作更為簡便。
    4. 獨(dú)立的存儲空間:每個域(包括子域)有獨(dú)立的存儲空間,各個存儲空間是完全獨(dú)立的,因此不會造成數(shù)據(jù)混亂。
    Web Storage分類
    Web Storage實(shí)際上由兩部分組成:sessionStorage與localStorage。
    sessionStorage用于本地存儲一個會話(session)中的數(shù)據(jù),這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當(dāng)會話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲,僅僅是會話級別的存儲。
    localStorage用于持久化的本地存儲,除非主動刪除數(shù)據(jù),否則數(shù)據(jù)是永遠(yuǎn)不會過期的。
    檢查是否支持Web Storage
    Web Storage在各大主流瀏覽器中都支持了,但是為了兼容老的瀏覽器,還是要檢查一下是否可以使用這項(xiàng)技術(shù)。
    第一種方式:通過檢查Storage對象是否存在來檢查瀏覽器是否支持Web Storage:
    代碼如下:
    if(typeof(Storage)!=="undefined"){
    // Yes! localStorage and sessionStorage support!
    // Some code.....
    } else {
    // Sorry! No web storage support..
    }
    第二種方式就是分別檢查各自的對象,例如檢查localStorage是否支持:
    代碼如下:
    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中存儲的是鍵值對,而且瀏覽器會以字符串方式存儲。記住在必要的時候?qū)⑺麄冝D(zhuǎn)為其他格式。
    sessionStorage與localStorage除了用途不同外,成員列表是一樣的:
    代碼如下:
    key = value: 存貯鍵值對
    setItem(key, value): 存貯鍵值對
    getItem(key): 取鍵值對
    removeItem(key):移除所有鍵值對
    clear():清空所有鍵值對
    length:鍵值對的數(shù)目
    這里還是要強(qiáng)調(diào)一下:setItem(key,value)方法中的value類型,理論上可以是任意類型,不過實(shí)際上瀏覽器會調(diào)用value的toString方法來獲取其字符串值并存儲到本地,因此如果是自定義的類型則需要自己定義有意義的toString方法。例如下面的例子結(jié)合JSON.stringify使用:
    代碼如下:
    var person = {'name': 'rainman', 'age': 24};
    localStorage.setItem("me", JSON.stringify(person));
    JSON.parse(localStorage.getItem('me')).name; // 'rainman'
    /**
    * JSON.stringify,將JSON數(shù)據(jù)轉(zhuǎn)化為字符串
    * 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"]
    */
    此外,添加鍵值對的時候,如果添加的數(shù)量比較多,比較保險的做法是去檢查是否有超出限額的異常:
    代碼如下:
    try {
    localStorage.setItem(itemId, values.join(';'));
    } catch (e) {
    if (e == QUOTA_EXCEEDED_ERR) {
    alert('Quota exceeded!');
    }
    }
    Web Storage的方法非常簡單,下面的示例是統(tǒng)計button點(diǎn)擊的次數(shù)的:
    代碼如下:
    <!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,點(diǎn)擊幾次button然后驗(yàn)證在關(guān)閉瀏覽器前后的效果。
    存在的問題
    Web Storage的缺陷主要集中在其安全性方面,具體體現(xiàn)在以下兩點(diǎn):
    1. 瀏覽器會為每個域分配獨(dú)立的存儲空間,即腳本在域A中是無法訪問到域B中的存儲空間的,但是瀏覽器卻不會檢查腳本所在的域與當(dāng)前域是否相同。即在域B中嵌入域A中的腳本依然可以訪問域B中的數(shù)據(jù)。
    2. 存儲在本地的數(shù)據(jù)未加密而且永遠(yuǎn)不會過期,極易造成隱私泄漏。
    此外,更多的安全相關(guān)的問題請參看后面實(shí)用參考中的鏈接。
    其他規(guī)范一覽(僅供了解,說不定什么時候就沒了)
    Web Database
    在老的HTML5提議中,假如你需要存儲復(fù)雜的數(shù)據(jù)則可以使用Web Database,可以像客戶端程序一樣使用SQL(Web Database標(biāo)準(zhǔn)已被廢棄,這里就是簡單提一下);
    globalStorage
    這個也是html5中提出來,在瀏覽器關(guān)閉以后,使用globalStorage存儲的信息仍能夠保留下來,localStorage一樣,域中任何一個頁面存儲的信息都能被所有的頁面共享, 不過目前只有FireFox支持。
    基本語法:
    • globalStorage['developer.mozilla.org'] —— 在developer.mozilla.org下面所有的子域都可以通過這個命名空間存儲對象來進(jìn)行讀和寫。
    • globalStorage['mozilla.org'] —— 在mozilla.org域名下面的所有網(wǎng)頁都可以通過這個命名空間存儲對象來進(jìn)行讀和寫。
    • globalStorage['org'] —— 在.org域名下面的所有網(wǎng)頁都可以通過這個命名空間存儲對象來進(jìn)行讀和寫。
    • globalStorage[''] —— 在任何域名下的任何網(wǎng)頁都可以通過這個命名空間存儲對象來進(jìn)行讀和寫
    方法屬性:
    • setItem(key, value) —— 設(shè)置或重置 key 值。
    • getItem(key) —— 獲取 key 值。
    • removeItem(key) —— 刪除 key 值。
    • 設(shè)置 key 值:window.globalStorage["planabc.net"].key = value;
    • 獲取 key 值:value = window.globalStorage["planabc.net"].key;
    其它特征:
    • 過期時間同 localStorage,其它的一些特性也和localStorage相似。
    • 現(xiàn)在Firefox只支持當(dāng)前域下的globalStorage存儲, 如果使用公用域會導(dǎo)致一個這樣一個類似的錯誤“Security error” code: “1000”。
    IndexedDB
    最后我們要介紹的就是IndexedDB了,相比其他兩個規(guī)范,目前只有Firefox實(shí)現(xiàn)了IndexedDB(順便提一下,Mozilla表示它們永遠(yuǎn)不會去實(shí)現(xiàn)Web SQL Database),不過Google已經(jīng)表示正在考慮在Chrome中加入IndexDB支持。
    IndexedDB引入了一個object store的概念,這有點(diǎn)像是一個SQL Database,你可以在“數(shù)據(jù)庫”中存儲“記錄”,并且每條“記錄”可以擁有很多“字段",每個字段都有一個特定的數(shù)據(jù)類型,你可以選擇記錄的子集, 并使用“光標(biāo)”進(jìn)行遍歷,同時object store中的所有變更都是基于“事務(wù)”的。
    更多的信息參看后面使用參考中講述FireFox中IndexedDB的文檔。