[Asp.net mvc]Asp.net mvc 中使用LocalStorage

目前使用比较多的本地存储方案有比如Flash SharedObject、Google Gears、Cookie、LocalStorage、User Data、Open Database等方案。综合比较了下，最终选择了LocalStorage。
关于他们之间的比较，我在此不多说了，本文着重实现。想了解他们之间的区别的朋友可以参考一下这几个园友博客：
1.JavaScript本地存储实践： http://www.cnblogs.com/xupeiyu/p/4447443.html
2.HTML5 LocalStorage 本地存储：http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html
这里是用UserData和HTML5-LocalStorage结合的方式，来取代cookie。参考修改了alien朋友的LocalStorage.js,<<传送门>>
做个简单的比较:
UserData：仅IE可用
Flash：存储空间大
Google Gears：存储空间没限制，需装额外的插件
HTML5-LocalStorage：官方建议每个站点可以本地存储5M的内容
原本的js我进行了些修改,如下:

Namespace = new Object();
// 全局对象仅仅存在register函数，参数为名称空间全路径，如"Grandsoft.GEA"
Namespace.register = function(fullNS) {
    // 将命名空间切成N部分, 比如Grandsoft、GEA等
    var nsArray = fullNS.split('.');
    var sEval = "";
    var sNS = "";
    for (var i = 0; i < nsArray.length; i++) {
        if (i != 0) sNS += ".";
        sNS += nsArray[i];
        // 依次创建构造命名空间对象（假如不存在的话）的语句
        // 比如先创建Grandsoft，然后创建Grandsoft.GEA，依次下去
        sEval += "if (typeof(" + sNS + ") == 'undefined') " + sNS + " = new Object();"
    }
    if (sEval != "") eval(sEval);
}

/**
 * 注册命名空间
 */
Namespace.register('SummitLocalStorage');

/**
 * @class SummitLocalStorage.LocalStorage
 * 跨浏览器的本地存储实现。高级浏览器使用localstorage，ie使用UserData。虽然说是本地存储，也请不要存储过大数据，最好不要大于64K.
 * 因为ie下UserData每页最大存储是64k。
 * @singleton
 * @author zhaoxianlie (xianliezhao@foxmail.com)
 */
(function() {
    /**
     * 验证字符串是否合法的键名
     * @param {Object} key 待验证的key
     * @return {Boolean} true：合法，false：不合法
     * @private
     */
    function _isValidKey(key) {
        return (new RegExp("^[^\\x00-\\x20\\x7f\\(\\)<>@,;:\\\\\\\"\\[\\]\\?=\\{\\}\\/\\u0080-\\uffff]+\x24")).test(key);
    }

    //所有的key
    var _clearAllKey = "_baidu.ALL.KEY_";

    /**
     * 创建并获取这个input:hidden实例
     * @return {HTMLInputElement} input:hidden实例
     * @private
     */
    function _getInstance() {
        //把UserData绑定到input:hidden上
        var _input = null;
        //是的，不要惊讶，这里每次都会创建一个input:hidden并增加到DOM树种
        //目的是避免数据被重复写入，提早造成“磁盘空间写满”的Exception
        _input = document.createElement("input");
        _input.type = "hidden";
        _input.addBehavior("#default#userData");
        document.body.appendChild(_input);
        return _input;
    }

    /**
     * 将数据通过UserData的方式保存到本地，文件名为：文件名为：config.key[1].xml
     * @param {String} key 待存储数据的key，和config参数中的key是一样的
     * @param {Object} config 待存储数据相关配置
     * @cofnig {String} key 待存储数据的key
     * @config {String} value 待存储数据的内容
     * @config {String|Object} [expires] 数据的过期时间，可以是数字，单位是毫秒；也可以是日期对象，表示过期时间
     * @private
     */
    function __setItem(key, config) {
        try {
            var input = _getInstance();
            //创建一个Storage对象
            var storageInfo = config || {};
            //设置过期时间
            if (storageInfo.expires) {
                var expires;
                //如果设置项里的expires为数字，则表示数据的能存活的毫秒数
                if ('number' == typeof storageInfo.expires) {
                    expires = new Date();
                    expires.setTime(expires.getTime() + storageInfo.expires);
                }
                input.expires = expires.toUTCString();
            }

            //存储数据
            input.setAttribute(storageInfo.key, storageInfo.value);
            //存储到本地文件，文件名为：storageInfo.key[1].xml
            input.save(storageInfo.key);
        } catch (e) {}
    }

    /**
     * 将数据通过UserData的方式保存到本地，文件名为：文件名为：config.key[1].xml
     * @param {String} key 待存储数据的key，和config参数中的key是一样的
     * @param {Object} config 待存储数据相关配置
     * @cofnig {String} key 待存储数据的key
     * @config {String} value 待存储数据的内容
     * @config {String|Object} [expires] 数据的过期时间，可以是数字，单位是毫秒；也可以是日期对象，表示过期时间
     * @private
     */
    function _setItem(key, config) {
        //保存有效内容
        __setItem(key, config);

        //下面的代码用来记录当前保存的key，便于以后clearAll
        var result = _getItem({
            key: _clearAllKey
        });
        if (result) {
            result = {
                key: _clearAllKey,
                value: result
            };
        } else {
            result = {
                key: _clearAllKey,
                value: ""
            };
        }

        if (!(new RegExp("(^|\\|)" + key + "(\\||$)", 'g')).test(result.value)) {
            result.value += "|" + key;
            //保存键
            __setItem(_clearAllKey, result);
        }
    }

    /**
     * 提取本地存储的数据
     * @param {String} config 待获取的存储数据相关配置
     * @cofnig {String} key 待获取的数据的key
     * @return {String} 本地存储的数据，获取不到时返回null
     * @example
     * SummitLocalStorage.LocalStorage.get({
     *      key : "username"
     * });
     * @private
     */
    function _getItem(config) {
        try {
            var input = _getInstance();
            //载入本地文件，文件名为：config.key[1].xml
            input.load(config.key);
            //取得数据
            return input.getAttribute(config.key) || null;
        } catch (e) {
            return null;
        }
    }

    /**
     * 移除某项存储数据
     * @param {Object} config 配置参数
     * @cofnig {String} key 待存储数据的key
     * @private
     */
    function _removeItem(config) {
        try {
            var input = _getInstance();
            //载入存储区块
            input.load(config.key);
            //移除配置项
            input.removeAttribute(config.key);
            //强制使其过期
            var expires = new Date();
            expires.setTime(expires.getTime() - 1);
            input.expires = expires.toUTCString();
            input.save(config.key);

            //从allkey中删除当前key            
            //下面的代码用来记录当前保存的key，便于以后clearAll
            var result = _getItem({
                key: _clearAllKey
            });
            if (result) {
                result = result.replace(new RegExp("(^|\\|)" + config.key + "(\\||$)", 'g'), '');
                result = {
                    key: _clearAllKey,
                    value: result
                };
                //保存键
                __setItem(_clearAllKey, result);
            }

        } catch (e) {}
    }

    //移除所有的本地数据
    function _clearAll() {
        result = _getItem({
            key: _clearAllKey
        });
        if (result) {
            var allKeys = result.split("|");
            var count = allKeys.length;
            for (var i = 0; i < count; i++) {
                if (!!allKeys[i]) {
                    _removeItem({
                        key: allKeys[i]
                    });
                }
            }
        }
    }


    /**
     * 获取所有的本地存储数据对应的key
     * @return {Array} 所有的key
     * @private
     */
    function _getAllKeys() {
        var result = [];
        var keys = _getItem({
            key: _clearAllKey
        });
        if (keys) {
            keys = keys.split('|');
            for (var i = 0, len = keys.length; i < len; i++) {
                if (!!keys[i]) {
                    result.push(keys[i]);
                }
            }
        }
        return result;
    }

    /**
     * 判断当前浏览器是否支持本地存储：window.localStorage
     * @return {Boolean} true：支持；false：不支持
     * @remark 支持本地存储的浏览器：IE8+、Firefox3.0+、Opera10.5+、Chrome4.0+、Safari4.0+、iPhone2.0+、Andrioid2.0+
     * @private
         var _isSupportLocalStorage = (('localStorage' in window) && (window['localStorage'] !== null)),
        _isSupportUserData = !!jQuery.browser.ie;
     */
    var _isSupportLocalStorage = (('localStorage' in window) && (window['localStorage'] !== null));

    SummitLocalStorage.LocalStorage = {
        /**
         * 如果支持本地存储，返回true；否则返回false
         * @type Boolean
         */
        isAvailable: _isSupportLocalStorage || _isSupportUserData,

        /**
         * 将数据进行本地存储（只能存储字符串信息）
         * <pre><code>
         * //保存单个对象
         * SummitLocalStorage.LocalStorage.set({
         *         key : "username",
         *         value : "baiduie",
         *         expires : 3600 * 1000
         * });
         * //保存对个对象
         * SummitLocalStorage.LocalStorage.set([{
         *         key : "username",
         *         value : "baiduie",
         *         expires : 3600 * 1000
         * },{
         *         key : "password",
         *         value : "zxlie",
         *         expires : 3600 * 1000
         * }]);
         * </code></pre>
         * @param {Object} obj 待存储数据相关配置，可以是单个JSON对象，也可以是由多个JSON对象组成的数组
         * <ul>
         * <li><b>key</b> : String <div class="sub-desc">待存储数据的key，务必将key值起的复杂一些，如：baidu.username</div></li>
         * <li><b>value</b> : String <div class="sub-desc">待存储数据的内容</div></li>
         * <li><b>expires</b> : String/Object (Optional)<div class="sub-desc">数据的过期时间，可以是数字，单位是毫秒；也可以是日期对象，表示过期时间</div></li>
         * </ul>
         */
        set: function(obj) {
            //保存单个对象
            var _set_ = function(config) {
                //key校验
                if (!_isValidKey(config.key)) {
                    return;
                }

                //待存储的数据
                var storageInfo = config || {};

                //支持本地存储的浏览器：IE8+、Firefox3.0+、Opera10.5+、Chrome4.0+、Safari4.0+、iPhone2.0+、Andrioid2.0+
                if (_isSupportLocalStorage) {
                    window.localStorage.setItem(storageInfo.key, storageInfo.value);
                    if (config.expires) {
                        var expires;
                        //如果设置项里的expires为数字，则表示数据的能存活的毫秒数
                        if ('number' == typeof storageInfo.expires) {
                            expires = new Date();
                            expires.setTime(expires.getTime() + storageInfo.expires);
                        }

                        window.localStorage.setItem(storageInfo.key + ".expires", expires);
                    }
                } else if (_isSupportUserData) { //IE7及以下版本，采用UserData方式
                    _setItem(config.key, storageInfo);
                }
            };

            //判断传入的参数是否为数组
            if (obj && obj.constructor === Array && obj instanceof Array) {
                for (var i = 0, len = obj.length; i < len; i++) {
                    _set_(obj[i]);
                }
            } else if (obj) {
                _set_(obj);
            }
        },

        /**
         * 提取本地存储的数据
         * <pre><code>
         * //获取某一个本地存储，返回值为：{key:"",value:"",expires:""}，未取到值时返回值为：null
         * var rst = SummitLocalStorage.LocalStorage.get({
         *         key : "username"
         * });
         * //获取多个本地存储，返回值为：["","",""]，未取到值时返回值为：[null,null,null]
         * SummitLocalStorage.LocalStorage.get([{
         *         key : "username"
         * },{
         *         key : "password"
         * },{
         *         key : "sex"
         * }]);
         * </code></pre>
         * @param {String} obj 待获取的存储数据相关配置，支持单个对象传入，同样也支持多个对象封装的数组格式
         * @config {String} key 待存储数据的key
         * @return {String} 本地存储的数据，传入为单个对象时，返回单个对象，获取不到时返回null；传入为数组时，返回为数组
         */
        get: function(obj) {
            //获取某一个本地存储
            var _get_ = function(config) {
                //结果    
                var result = null;
                if (typeof config === "string") config = {
                    key: config
                };
                //key校验
                if (!_isValidKey(config.key)) {
                    return result;
                }

                //支持本地存储的浏览器：IE8+、Firefox3.0+、Opera10.5+、Chrome4.0+、Safari4.0+、iPhone2.0+、Andrioid2.0+
                if (_isSupportLocalStorage) {
                    result = window.localStorage.getItem(config.key);
                    //过期时间判断，如果过期了，则移除该项
                    if (result) {
                        var expires = window.localStorage.getItem(config.key + ".expires");
                        result = {
                            value: result,
                            expires: expires ? new Date(expires) : null
                        };
                        if (result && result.expires && result.expires < new Date()) {
                            result = null;
                            window.localStorage.removeItem(config.key);
                            window.localStorage.removeItem(config.key + ".expires");
                        }
                    }
                } else if (_isSupportUserData) { //IE7及以下版本，采用UserData方式
                    //这里不用单独判断其expires，因为UserData本身具有这个判断
                    result = _getItem(config);
                    if (result) {
                        result = {
                            value: result
                        };
                    }
                }

                return result ? result.value : null;
            };

            var rst = null;
            //判断传入的参数是否为数组
            if (obj && obj.constructor === Array && obj instanceof Array) {
                rst = [];
                for (var i = 0, len = obj.length; i < len; i++) {
                    rst.push(_get_(obj[i]));
                }
            } else if (obj) {
                rst = _get_(obj);
            }
            return rst;
        },

        /**
         * 移除某一项本地存储的数据
         * <pre><code>
         * //删除一个本地存储项
         * SummitLocalStorage.LocalStorage.remove({
         *         key : "username"
         * });
         * //删除多个本地存储项目 *
         * SummitLocalStorage.LocalStorage.remove([{
         *         key : "username"
         * },{
         *         key : "password"
         * },{
         *         key : "sex"
         * }]);
         * </code></pre>
         * @param {String} obj 待移除的存储数据相关配置，支持移除某一个本地存储，也支持数组形式的批量移除
         * @config {String} key 待移除数据的key
         * @return 无
         */
        remove: function(obj) {
            //移除某一项本地存储的数据
            var _remove_ = function(config) {
                //支持本地存储的浏览器：IE8+、Firefox3.0+、Opera10.5+、Chrome4.0+、Safari4.0+、iPhone2.0+、Andrioid2.0+
                if (_isSupportLocalStorage) {
                    window.localStorage.removeItem(config.key);
                    window.localStorage.removeItem(config.key + ".expires");
                } else if (_isSupportUserData) { //IE7及以下版本，采用UserData方式
                    _removeItem(config);
                }
            };

            //判断传入的参数是否为数组
            if (obj && obj.constructor === Array && obj instanceof Array) {
                for (var i = 0, len = obj.length; i < len; i++) {
                    _remove_(obj[i]);
                }
            } else if (obj) {
                _remove_(obj);
            }
        },

        /**
         * 清除所有本地存储的数据
         * <pre><code>
         * SummitLocalStorage.LocalStorage.clearAll();
         * </code></pre>
         */
        clearAll: function() {
            //支持本地存储的浏览器：IE8+、Firefox3.0+、Opera10.5+、Chrome4.0+、Safari4.0+、iPhone2.0+、Andrioid2.0+
            if (_isSupportLocalStorage) {
                window.localStorage.clear();
            } else if (_isSupportUserData) { //IE7及以下版本，采用UserData方式
                _clearAll();
            }
        },

        //保存单个对象到本地  
        //save: function(EmployeeID, EmployeeName, EmployeeDescription,EmployeeAge) {
        //    SummitLocalStorage.LocalStorage.set({
        //       /* key: EmployeeID + EmployeeName + EmployeeDescription+EmployeeAge,*/
        //       key:"wangbiaoTest3",
        //        value: "{  ‘员工编号’: ‘" + EmployeeID + "’,‘员工姓名’: ‘" + EmployeeName + "’, ‘员工描述’:‘" + EmployeeDescription + "’, ‘员工年龄’:‘"+EmployeeAge+"’}",
        //        expires: 3600 * 1000 /*单位：ms*/
        //    });
        //},
        save: function (result) {
            SummitLocalStorage.LocalStorage.set({
                key: "summit",
                value: result,
                expires: 3600 * 1000 /*单位：ms*/
            });
        },

        /**
         * 获取所有的本地存储数据对应的key
         * <pre><code>
         * var keys = SummitLocalStorage.LocalStorage.getAllKeys();
         * </code></pre>
         * @return {Array} 所有的key
         */
        getAllKeys: function() {
            var result = [];
            //支持本地存储的浏览器：IE8+、Firefox3.0+、Opera10.5+、Chrome4.0+、Safari4.0+、iPhone2.0+、Andrioid2.0+
            if (_isSupportLocalStorage) {
                var key;
                for (var i = 0, len = window.localStorage.length; i < len; i++) {
                    key = window.localStorage.key(i);
                    if (!/.+\.expires$/.test(key)) {
                        result.push(key);
                    }
                }
            } else if (_isSupportUserData) { //IE7及以下版本，采用UserData方式
                result = _getAllKeys();
            }

            return result;
        }
    };
})();

接着先上控制器，准备数据：

[HttpPost]
public ActionResult LocalStorage_Read()
{
    var model = new List<UserModel> { 
        new UserModel{Id=1,Name="summit",Age=20,Description="t5est",CreateOn=DateTime.Now},
        new UserModel{Id=2,Name="alex",Age=20,Description="t5est",CreateOn=DateTime.Now},
        new UserModel{Id=3,Name="glant",Age=20,Description="t5est",CreateOn=DateTime.Now}
    };
    return Json(model);
} 

View中代码如下:

<script src="~/Scripts/jquery-2.1.1.js"></script>
<script src="~/Scripts/localstorage.js"></script>

<script type="text/javascript">
        $(function () {

            var Alldata = SummitLocalStorage.LocalStorage.get({
                key: "summit"
            });
            if (Alldata != null) {1                 ReadStorageData(Alldata);
            }
            else {
                StorageData();
            }

            function StorageData() {
                //把配置数据写到LocalStorage中
                $.ajax({
                    type: "POST",
                    url: "/home/LocalStorage_Read",
                    success: function (result) {
                        var obj = JSON.stringify(result);
                        SummitLocalStorage.LocalStorage.save(obj);
                        Alldata = SummitLocalStorage.LocalStorage.get({ key: "summit" });
                        ReadStorageData(Alldata);
                    }
                });
            }

            function ReadStorageData(Alldata) {
                var data = JSON.parse(Alldata);//这里获取到的值是一个数组,你可以按照你的想法去操作
                var str = "";
                for (var i = 0; i < data.length; i++) {
                    str +="---"+ data[i].Id;
                }
                alert(str);
            }
        });
</script>

 

FireFox下效果如图:

Google:

IE:

现在来解释一下上面的代码:

SummitLocalStorage.LocalStorage.get({ key: "summit" }); 获取指定Key的值

SummitLocalStorage.LocalStorage.save(obj) ; save是js封装的一个方法:用于保存一个对象,你也可以指定固定的参数传递.

在Asp.net MVC中使用LocalStorage还是挺方便的,LocalStorage容量为5M,是Cookies的N倍,有需要的朋友可以考虑一下。