使用js实现前端缓存

使用js实现前端缓存的工具类,在支持html5的浏览器上优先使用html5的storage进行缓存

调用方式为(例如存储):

sy.cookieString/('key','value')

此处使用的第三方js库为:

jquery.cookie.js

jquery.js

json2.js


var sy = sy || {};
sy.data = sy.data || {};// 用于存放临时的数据或者对象
/**
 * 0:当前窗口
 * 1:所有窗口共享
 * 2:指定域名结尾允许访问,配置domain,需要支持html5
 */
sy.getDataScope = function(){
	return 1;
}
/**
 * 范围
 */
sy.getDomain = function(){
	return ".com";
}
/**
 * 当前窗口缓存
 */
sy.setItem = function(key,value){
	if(key!=undefined){
		if(sy.data==undefined){
			sy.data = {};
		}
		sy.data[key]=value;
	}
}
/**
 * 当前窗口获取缓存
 */
sy.getItem = function(key){
	if(key!=undefined){
		if(sy.data==undefined){
			return undefined;
		}
		return sy.data[key];
	}
}
/**
 * 缓存数据
 * @param key 键
 * @param value 值
 */
sy.cookie = function(key,value){
	switch(sy.getDataScope()){
		case 0:
			if(sessionStorage){
				return storage(sessionStorage,key,value);
			}else{
				if(value==undefined){
					return sy.data[key];
				}else{
					sy.data[key]=value;
					return value;
				}
			}
			break;
		case 2:
			if(globalStorage){
				return storage(globalStorage[sy.getDomain()],key,value);
			}//如果域对象不可用则存储为全局
		case 1:
			if(localStorage){
				return storage(localStorage,key,value);
			}else{
				if(value==undefined){
					return $.cookie(key);;
				}else{
					$.cookie(key,value);;
					return value;
				}
				
			}
			break;
	}
	function storage(obj,key,value){
		if(obj){
			if(value==undefined){
				return obj.getItem(key);
			}else{
				obj.setItem(key,value);
				return value;
			}
		}
	}
}
/**
 * 仅用于存储cookie,会将对象转为jsonString
 */
sy.cookieString = function(key,value){
	if(value!=undefined){
		sy.cookie(key,toJsonString(value));
	}
}
/**
 * 仅用于读取cookie,会将jsonString转为对象
 */
sy.cookieParse = function(key){
	var cv = sy.cookie(key);
	if(cv==undefined){
		return undefined;
	}
	return JSON.parse(cv);
}
/**
 * 清除所有缓存
 */
sy.clearCookies = function(){
	switch(sy.getDataScope()){
	case 0:
		if(sessionStorage){
			sessionStorage.clear();
		}else{
			sy.data={};
		}
		break;
	case 2:
		if(globalStorage){
			globalStorage[sy.getDomain()].clear();
			break;
		}//如果域对象不可用则清理全局
	case 1:
		if(localStorage){
			localStorage.clear();
		}else{
			clearCookies();
			function clearCookies(){
				var cookies = document.cookie.split(";");
			    for (var i = 0; i < cookies.length; i++) {
			    	var cookie = cookies[i];
			    	var eqPos = cookie.indexOf("=");
			    	var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
			    	document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
			    }
				if(cookies.length > 0)
				{
				    for (var i = 0; i < cookies.length; i++) {
				    	var cookie = cookies[i];
				    	var eqPos = cookie.indexOf("=");
				    	var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
				    	var domain = location.host.substr(location.host.indexOf('.'));
				    	document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=" + domain;
				    }
				}
			}
		}
		break;
	}
}
/**
 * 删除cookie
 */
sy.removeCookie = function(key){
	switch(sy.getDataScope()){
	case 0:
		if(sessionStorage){
			sessionStorage.removeItem(key);
		}else{
			sy.data[key]=undefined;
		}
		break;
	case 2:
		if(globalStorage){
			globalStorage[sy.getDomain()].removeItem(key);
			break;
		}//如果域对象不可用则删除全局cookie
	case 1:
		if(localStorage){
			localStorage.removeItem(key);
		}else{
			$.cookie(key,null);
		}
		break;
	}
}


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值