浅探跨浏览器的本地缓存解决方案

最近对于HTML5中的LocalStorage以及跨浏览器的本地存储稍微研究了下~目前来说HTML5这个API还是能在以后又很大的作用，无论是Web App的离线存储还是对于流量的节约或者是用户体验的提高都是有很好的推进作用~

 

但是市面上的浏览器貌似太多~比如像IE6 7 什么的不支持HTML5 api，于是乎就想研究下跨浏览器的本地存储~下面这张图是比较流行的跨浏览器解决方案：

具体的存储比对见这篇文章：http://blog.tugai.net/2010/01/16/browser-local-stroage/

 

cookies貌似比较小所以初期组件不考虑~

这次的初期组件编写先围绕下面的需求进行，主要还是兼容到了低版本IE，Chrome，FF浏览器，对于浏览器间的调用的Flash暂时不考虑~以后会加入~

 

 

1. userData

a) 浏览器支持：IE5+。

b) 方法：

        getAttribute()——获取指定的属性值

        load(object)——从userData存储区载入存储的对象数据

        removeAttribute()——移除对象的指定属性

        save(object)——将对象数据存储到一个userData存储区

        setAttribute()——设置指定的属性值

c) 大小限制：

        线上：单文件128K，单域名总文件大小1024K

        受限站点：单文件64K，单域名下总文件大小640K

d) 文件地址：

        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

e) 文件存储格式：XML

f) 缺点：

        数据一直存在，除非人为删除或设置该数据的失效日期。

        数据没有加密，不安全。

2. LocalStorage

a) 浏览器支持：safari4+、firefox3.5+、IE8+、chrome4+、opera10.5+。

b) 属性：

        Length——本地存储的键值个数

c) 方法：

        getItem(key)——获取指定key的本地存储值

        setItem(key,value)——将value存储到key字段

        removeItem(key)——删除指定key的本地存储值

        clear()——清空

        key(n)——返回第几个本地存储值

d) 事件：

        storage——在存储的值改变后触发（IE8、IE9不触发，firefox需要给window对象绑定）

        事件对象属性：

1. Key：包含存储中被更新或删除的键

2. oldValue：更新前键对应的值（如果是新添加的数据，则oldValue属性值为null）

3. newValue：更新后的值（如果是被删除的数据，则newValue属性值为null）

4. url：指向Storage事件发生的源

5. storageArea：指向值发生变化的localStorage对象

e) 大小限制：5M（官方建议）。

3.      globalStorage

主要是针对FF先前版本进行

 

初期版本提供方法主要有test ，getItem ，setItem键值对 还有就是remove这几个方法。

 

代码如下：

 

/**
 * @author Leyteris.Lee
 * @date 2011.6.20
 * @modified 2011.6.23
 * @file DibyeStorage本地储存
 */
if (typeof FLOWG == "undefined" || !FLOWG) {
    var FLOWG = {};
}
FLOWG.DibyeStorage = (function(){
	
    var UserData = (function(){
        var userData = null;
        var name = location.hostname;
        
        if (!!document.all) {
            if (!userData) {
                userData = document.createElement('input');
                userData.type = "hidden";
                userData.style.display = "none";
                userData.addBehavior("#default#userData");
                document.body.appendChild(userData);
                var expires = new Date();
                expires.setDate(expires.getDate() + 365);
                userData.expires = expires.toUTCString();
            }
        }
        return {
            test: function(){
                return !!document.all;
            },
            setItem: function(key, value){
                userData.load(name);
                userData.setAttribute(key, value);
                userData.save(name);
            },
            getItem: function(key){
                userData.load(name);
                return userData.getAttribute(key);
            },
            remove: function(key){
                userData.load(name);
                userData.removeAttribute(key);
                userData.save(name);
            }
        };
    }());
    
    var LocalStorage = (function(){
        var lStorage = null;
        var domain = location.hostname;
        if (!lStorage) {
            lStorage = window.localStorage ||
            window.globalStorage &&
            window.globalStorage[domain];
        }
        
        return {
            test: function(){
                return !!lStorage;
            },
            setItem: function(key, value){
                lStorage.setItem(key, value);
            },
            getItem: function(key){
                return lStorage.getItem(key);
            },
            remove: function(key){
                lStorage.removeItem(key);
            }
        };
    }());
    
    var DibyeData = function(){
        var storeObj = null;
        var list = [LocalStorage, UserData];
        for (var i = 0; i < list.length; ++i) {
            if (list[i].test()) {
                storeObj = list[i];
                break;
            }
        }
        return storeObj;
    }
    
    return DibyeData;
})();

 

 

使用：

 

			var F = FLOWG.DibyeStorage();
			F.setItem("node","hello");	
			alert(F.getItem("node"));

 

没事在公司瞎嘟哝的~还没用将Flash本地存储加入~~以后继续完善~

 

另外再推荐一个超级牛X的本地储存库https://github.com/eliast/persist-js：支持很多不同的客户端存储方案，包括 Cookie, Local Storage, Database, Google Gears, Flash 等容器，自动做出选择。

 

参考文章：

http://www.nbyum.com/?p=349

http://www.cnblogs.com/rainman/archive/2011/06/22/2086069.html

http://hi.baidu.com/hitpang/blog/item/60697710d84be7e8c2ce792b.html

http://blog.tugai.net/2010/01/16/browser-local-stroage/

http://www.planabc.net/2008/08/14/dom_storage/

http://wangye.org/blog/search/JavaScript%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8/

http://hi.baidu.com/html5css3/blog/item/4034cc0e5d2b462cb0351ddb.html

http://www.dklogs.net/?p=625