目前使用比较多的本地存储方案有比如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 ([email protected])
*/
(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倍,有需要的朋友可以考虑一下。