本地存储组件实现对IE低版本浏览器的兼容性支持

    在前端开发过程中，会用到本地缓存，但是由于浏览器对不同规范支持的程度不一样，每次进行使用都要为兼容行花费不少时间。我整理了一个本地存储的组件。
    组件特点：
可以配置使用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;
})();