在前端开发过程中，会用到本地缓存，但是由于浏览器对不同规范支持的程度不一样，每次进行使用都要为兼容行花费不少时间。我整理了一个本地存储的组件。
组件特点：
- 可以配置使用localStorage、sessionStorage、cookie、Object，IE低版本支持userData
- 统一的使用接口set、get、remove
- 使用方便，直接引入JS，进行初始化即可
下面是源码:
(function() {
var ua = navigator.userAgent.toLowerCase();
var t = ua.match(/msie ([\d.]+)/);
var ie = t && t[1];
var useUserData = ie ==6 || ie == 7;
var encodeVal = function(value) {
return encodeURIComponent(value);
};
var decodeVal = function(value) {
return decodeURIComponent(value);
};
var isCookieEnabled = function() {
if(window.navigator.cookieEnabled) {
return window.navigator.cookieEnabled;
}
var key = 'test_cookie_enable',
value = 'test' + Math.random(),
result = _cookieStorage.set(key, value);
if (!result) {
return false;
}
var value2 = _cookieStorage.get(key);
_cookieStorage.remove(key);
return value == value2;
};
var _sessionStorage = {
get : function(key) {
return sessionStorage.getItem(key) || null;
},
set : function(key, value) {
sessionStorage.setItem(key, value);
},
remove : function(key) {
sessionStorage.removeItem(key);
}
};
var _localStorage = {
get : function(key) {
return decodeVal(localStorage.getItem(key)) || null;
},
set : function(key, value) {
value = encodeVal(value);
localStorage.setItem(key, value);
},
remove : function(key) {
localStorage.removeItem(key);
}
};
var _userDataStorage = {
init: function(maxage) {
var memory = document.createElement('input');
this.memory = memory;
memory.style.display = "none";
memory.style.behavior = "url('#default#userData')";
document.body.appendChild(memory);
if(maxage) {
var now = +new Date();
var expires = now + maxage * 1000;
memory.expires = new Date(expires).toUTCString();
}
memory.load('UserDataStorage');
},
get : function (key) {
return decodeVal(this.memory.getAttribute(key)) || null;
},
set : function(key, value) {
value = encodeVal(value);
this.memory.setAttribute(key, value);
this.memory.save('UserDataStorage');
},
remove : function(key) {
this.memory.removeAttribute(key);
this.memory.save('_userDataStorage');
}
};
var _cookieStorage = {
init: function(maxage, path) {
this.maxage = maxage;
this.path = path;
},
set : function(key, value) {
var cookie = key + '=' + encodeVal(value);
if(this.maxage) cookie += '; max-age=' + this.maxage;
if(this.path) cookie += '; path=' + this.path;
document.cookie = cookie;
},
get : function(key) {
var cookies = document.cookie;
var reg = new RegExp('(?:^ |)(' + key + ')=([^;]+)');
var value = cookies.match(reg);
if(value) {
return decodeVal(value[2]);
}
return null
},
remove : function(key) {
this.init(0, '/');
this.set(key, '');
}
};
var _objectStorage = {
init : function() {
this.data = {};
},
set : function(key, value) {
value = encodeVal(value);
this.data[key] = value;
},
get : function (key) {
return decodeVal(this.data[key]) || null;
},
remove : function(key) {
delete this.data[key];
}
};
/**
* 本地存储
* @param {String} type 存储类型 [local,session,cookie,page]
* @param {Number} maxage cookie到期时间 单位秒
* @param {String} path 路径
* @return {Object} 具有set、get、remove方法
*/
function Storage(type, maxage, path) {
var storage;
maxage = maxage || '';
path = path || '/';
type = type || 'local';
switch (type) {
case 'local' :
try { // 禁用cookie、localStorage时访问会报错
storage = window.localStorage ? _localStorage : useUserData ? _userDataStorage : Object;
} catch (e) {
storage = _objectStorage;
}
break;
case 'session' :
try { // 禁用cookie、_localStorage时访问会报错
storage = window.sessionStorage ? _sessionStorage : _objectStorage;
} catch (e) {
storage = _objectStorage;
}
break;
case 'cookie' :
storage = isCookieEnabled() ? _cookieStorage : _objectStorage;
break;
case 'page' :
storage = _objectStorage;
}
storage.init && storage.init(maxage, path);
return storage;
}
window.Storage = Storage;
})();
使用例子：
var storage = new Storage('local');
storage.set('name', '中国人');
var name = storage.get('name');
alert(name);
storage.remove('name');
var name = storage.get('name');
alert(name);
如果觉得有用可以推荐一下，那里实现的有问题，也希望指正。