JavaScript本地存儲實踐（html5的localStorage和ie的userData）

本地存儲解決方案很多，比如Flash SharedObject、Google Gears、Cookie、DOM Storage、User Data、window.name、Silverlight、Open Database等。
借用網上的一張圖來看下目前主流的本地存儲方案：

• Cookie： 在web中得到廣泛應用，但侷限性非常明顯，容量太小，有些站點會因爲出於安全的考慮而禁用cookie，cookie沒有想象中的那麼安全，Cookie 的內容會隨着頁面請求一併發往服務器。
• Flash SharedObject： 使用的是kissy的store模塊來調用Flash SharedObject。Flash SharedObject的優點是容量適中，基本上不存在兼容性問題，缺點是要在頁面中引入特定的swf和js文件，增加額外負擔，處理繁瑣；還是有部分機子沒有flash運行環境。
• Google Gears： Google的離線方案，已經停止更新，官方推薦使用html5的localStorage方案。
• User Data： 是微軟爲IE專門在系統中開闢的一塊存儲空間，所以說只支持Windows+IE的組合，實際測試在2000（IE5.5）、XP（IE6、IE7），Vista（IE7）下都是可以正常使用的。在XP下，一般位於C:\Documents and Settings\用戶名\UserData，有些時候會在C:\Documents and Settings\用戶名\Application Data\Microsoft\Internet Explorer\UserData。在Vista下，位於C:\Users\用戶名\AppData\Roaming\Microsoft\Internet Explorer\UserData；單個文件的大小限制是128KB，一個域名下總共可以保存1024KB的文件，文件個數應該沒有限制。在受限站點裏這兩個值分別是64KB和640KB，所以如果考慮到各種情況的話，單個文件最好能控制64KB以下。
• localStorage： 相對於上述本地存儲方案，localStorage有自身的優點：容量大、易用、強大、原生支持；缺點是兼容性差些（chrome,  safari, firefox，IE 9，IE8都支持 localStorage，主要是IE8以下版本不支持）、安全性也差些（所以請勿使用localStorage保存敏感信息）。

主要說說localStorage和UserData：

UserData

• 基本語法 :
  XML: <Prefix: CustomTag id=sID style=”behavior:url(‘#default#userData’)” />
  HTML: <ELEMENT style=”behavior:url(‘#default#userData’)” id=sID>
• Script:
  object.style.behavior = “url(‘#default#userData’)”
  object.addBehavior (“#default#userData”)
• 屬性:
  expires 設置或者獲取 userData behavior 保存數據的失效日期。
  XMLDocument 獲取 XML 的引用。
• 方法:
  getAttribute() 獲取指定的屬性值。
  load(object) 從 userData 存儲區載入存儲的對象數據。
  removeAttribute() 移除對象的指定屬性。
  save(object) 將對象數據存儲到一個 userData 存儲區。
  setAttribute() 設置指定的屬性值。

要使用userData存儲功能，必須先建立一個HTML標籤，然後將behavior:url(‘#default#userData’)樣式屬性加上去，等於說userData是寄存於HTML標籤的，當然不是所有標籤都是可以的，僅限於部分標籤。要了解更多的信息可以訪問MSDN的《userData Behavior》 。

這裏封裝一些方法：

var UserData = {
        userData : null,
        name : location.hostname,
        //this.name = "css88.com";

        init:function(){
            if (!UserData.userData) {
                try {
                    UserData.userData = document.createElement('INPUT');
                    UserData.userData.type = "hidden";
                    UserData.userData.style.display = "none";
                    UserData.userData.addBehavior ("#default#userData");
                    document.body.appendChild(UserData.userData);
                    var expires = new Date();
                    expires.setDate(expires.getDate()+365);
                    UserData.userData.expires = expires.toUTCString();
                } catch(e) {
                    return false;
                }
            }
            return true;
        },

        setItem : function(key, value) {

            if(UserData.init()){
                UserData.userData.load(UserData.name);
                UserData.userData.setAttribute(key, value);
                UserData.userData.save(UserData.name);
            }
        },

        getItem : function(key) {
            if(UserData.init()){
            UserData.userData.load(UserData.name);
            return UserData.userData.getAttribute(key)
            }
        },

        remove : function(key) {
            if(UserData.init()){
            UserData.userData.load(UserData.name);
            UserData.userData.removeAttribute(key);
            UserData.userData.save(UserData.name);
            }

        }
    };

 

localStorage

非常通俗易懂的接口:

• localStorage.getItem(key):獲取指定key本地存儲的值
• localStorage.setItem(key,value)：將value存儲到key字段
• localStorage.removeItem(key):刪除指定key本地存儲的值

留意localStorage存儲的值都是字符串類型，在處理複雜的數據時，比如json數據時，需要藉助JSON類，將json字符串轉換成真正可用的json格式，localStorage第二個實戰教程會重點演示相關功能。localStorage還提供了一個storage事件，在存儲的值改變後觸發。
目前瀏覽器都帶有很好的開發者調試功能，下面分別是Chrome和Firefox的調試工具查看LocalStorage：


特別注意：localStorage在不同瀏覽器中的差異研究

demo頁面

這裏寫了一個簡單的demo頁面，使用 localStorage和userData 的例子，試着在demo頁面的文本框中編輯內容，不要點擊發布按鈕，關閉或刷新（強制刷新Ctrl+F5）會保存你編輯好的內容，它會始終有效，除非您點擊發布按鈕刪除掉存儲的內容。整個過程中沒有任何被數據發送到服務器。

demo頁面：http://www.css88.com/demo/localstorage/

 

 

聲明: 本文采用 BY-NC-SA 協議進行授權 | WEB前端開發
轉載請註明轉自《JavaScript本地存儲實踐（html5的localStorage和ie的userData）》