javascript数据缓存策略之本地存储

标签: javascript 数据 缓存 | 发表时间:2012-09-15 01:46 | 作者:xpbb
出处:http://www.cnblogs.com/

昨天看了司徒正美的博客http://www.cnblogs.com/rubylouvre/archive/2012/09/14/2684061.html讲到一个很完美的文件加载方案,思考很久,收益颇深。他考虑的很全面,但是美中不足的是并没有考虑ie6、7的情况,ie6、7下单个文件最大值能存64K,很多大文件是无法加载的,尤其是新版的jquery。

 

如果把这个思路再扩展一下,放到数据缓存里面来,将是一个很完美的解决方案。

 

我们先完成一个本地存储的DB类。

db = function() {
var store = window.localStorage, doc = document.documentElement;
if (!store) {
doc.style.behavior = 'url(#default#userData)';
}
return {
/**
* 保存数据
*/
set : function(key, val, context) {
if (store) {
return store.setItem(key, val, context);
} else {
doc.setAttribute(key, value);
return doc.save(context || 'default');
}
},
/**
* 读取数据
*/
get : function(key, context) {
if (store) {
return store.getItem(key, context);
} else {
doc.load(context || 'default');
return doc.getAttribute(key) || '';
}
},
/**
* 删除数据
* @param {Object}
* @param {Object}
*/
rm : function(key, context) {
if (store) {
return store.removeItem(key, context);
} else {
context = context || 'default';
doc.load(context);
doc.removeAttribute(key);
return doc.save(context);
}
},
/**
* 清空数据
*/
clear : function() {
if (store) {
return store.clear();
} else {
doc.expires = -1;
}
}
};
}();

 

然后我们再写一个简单的ajax函数。

 

if ( typeof window.XMLHttpRequest === "undefined") {
window.XMLHttpRequest = function() {
return new window.ActiveXObject(navigator.userAgent.indexOf("MSIE 5") >= 0 ? "Microsoft.XMLHTTP" : "Msxml2.XMLHTTP");
};
}
ajax = function(uri, options) {
var httpRequest, httpSuccess, timeout, isTimeout = false, isComplete = false, noop = function() {
};

options = {
method : options.method || "GET",
data : options.data || null,
arguments : options.arguments || null,

onSuccess : options.onSuccess || noop,
onError : options.onError || noop,
onComplete : options.onComplete || noop,
onTimeout : options.onTimeout || noop,
isAsync : options.isAsync || true,
timeout : options.timeout ? options.timeout : 30000,
contentType : options.contentType ? options.contentType : "utf-8",
type : options.type || "xml"
};
uri = uri || "";
timeout = options.timeout;

httpRequest = new window.XMLHttpRequest();
httpRequest.open(options.method, uri, options.isAsync);
//设置编码集
httpRequest.setRequestHeader("Content-Type", options.contentType);

/**
* @ignore
*/
httpSuccess = function(r) {
try {
return (!r.status && location.protocol == "file:") || (r.status >= 200 && r.status < 300) || (r.status == 304) || (navigator.userAgent.indexOf("Safari") > -1 && typeof r.status == "undefined");
} catch(e) {
}
return false;
}
/**
* @ignore
*/
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState == 4) {
if (!isTimeout) {
var o = {};
o.responseText = httpRequest.responseText;
o.responseXML = httpRequest.responseXML;
o.data = options.data;
o.status = httpRequest.status;
o.uri = uri;
o.arguments = options.arguments;

if (httpSuccess(httpRequest)) {
if (options.type === "script") {
eval.call(window, data);
}
options.onSuccess(o);

} else {
options.onError(o);
}
options.onComplete(o);
}
isComplete = true;
//删除对象,防止内存溢出
httpRequest = null;
}
};

httpRequest.send(options.data);

window.setTimeout(function() {
var o;
if (!isComplete) {
isTimeout = true;
o = {};
o.uri = uri;
o.arguments = options.arguments;
options.onTimeout(o);
options.onComplete(o);
}
}, timeout);

return httpRequest;
};

 

好了,最后说一下解决方案,源码如下:

 

var cacheData = {};
cache = function(url, func, cacheTime) {
//先读内存
if(cacheData[url]){
func.call(this, cacheData[url]);
return;
}else{
var me = this,
chData = db.get(url),
chTime = db.get(url + "__time"),
now = new Date().getTime(),
cacheTime = cacheTime || 60,
ct = now - 60000 * cacheTime, //默认缓存时间为1个小时
success = function(data) {
var res = data.responseText;
cacheData[url] = res;
db.set(url, res);
db.set(url + "__time", now);
func.call(me, res);
};
//存在数据的情况
if (chData && chTime) {
//未过期的情况
if (ct < chTime) {
func.call(this, chData);
} else {//过期的情况
ajax(url, {'onSuccess' : success});
}
} else {
ajax(url, {'onSuccess' : success});
}
}

}

 

over。

 

 

本文链接

相关 [javascript 数据 缓存] 推荐:

javascript数据缓存策略之本地存储

- - 博客园_首页
昨天看了司徒正美的博客http://www.cnblogs.com/rubylouvre/archive/2012/09/14/2684061.html讲到一个很完美的文件加载方案,思考很久,收益颇深. 他考虑的很全面,但是美中不足的是并没有考虑ie6、7的情况,ie6、7下单个文件最大值能存64K,很多大文件是无法加载的,尤其是新版的jquery.

再谈JavaScript的数据类型问题

- 茄 - aimingoo的专栏
 JavaScript的数据类型问题已经讨论过很多次了,但许多人还有许多书仍然沿用着错误的、混乱的一些观点,所以就再细讲一回. 提及这个讨论的原因在于argb同学在我的MSN博客(现在变成了wordproess,在这里)上的一段回复,又更早的起源则是两年前关于《JavaScript征途》一书的大讨论:.

腾迅股票数据接口 http/javascript

- - CSDN博客推荐文章
之前使用了新浪的股票数据,由于新浪http/javascript缺少一些数据,用chrome自带的开发工具监视腾迅财经HTTP信息,得到以下获取股票数据的方法. 以五粮液为例,要获取最新行情,访问数据接口:. 以 ~ 分割字符串中内容,下标从0开始,依次为. v_ff_sz000858="sz000858~41773.67~48096.67~-6322.99~-5.53~10200.89~14351.02~-4150.13~-3.63~114422.25~53015.90~59770.57~五 粮 液~20121221";.

MongoDB数据缓存刷新机制

- 铭文 - NoSQLFan
本文原文出自淘宝DBA团队博客,文章对MongoDB源码进行了分析,跟踪了其缓存Flush机制,对缓存刷新机制进行了清晰的讲解. 最近配合好几个项目测试了MongoDB的写入性能. 在内存没有用尽的情况下,虽然MongoDB只有一个更新线程,写入还是非常快的,基本上能达到25000/s以上(索引数据用uuid_generate_randome和uuid_unparse随机产生).

Spring Boot使用redis做数据缓存

- - ITeye博客
SysUser.class)); //请注意这里. 3 redis服务器配置. /** *此处的dao操作使用的是spring data jpa,使用@Cacheable可以在任意方法上,*比如@Service或者@Controller的方法上 */ public interface SysUserRepo1 extends CustomRepository {.

redis数据结构缓存运用

- - 企业架构 - ITeye博客
之前redis已经描述了redis 的基本作用与用处, 这一篇主要讲述redis运用场景以及分片,和spring整合. redis 存储数据结构大致5种,String 普通键值对,用的比较多. HASH针对 key 唯一标识 hashmap 键值对运用也比较多 list set 当然是集合运用 sortedSet 排序集合使用.

Spring AOP + Redis缓存数据库查询

- - 编程语言 - ITeye博客
我们希望能够将数据库查询结果缓存到Redis中,这样在第二次做同样的查询时便可以直接从redis取结果,从而减少数据库读写次数. 必须要做到与业务逻辑代码完全分离. 从缓存中读出的数据必须与数据库中的数据一致. 如何为一个数据库查询结果生成一个唯一的标识. Key),能唯一确定一个查询结果,同一个查询结果,一定能映射到同一个.

spring + redis 实现数据的缓存

- - ImportNew
(目的不是加快查询的速度,而是减少数据库的负担). 注意:jdies和commons-pool两个jar的版本是有对应关系的,注意引入jar包是要配对使用,否则将会报错. 因为commons-pooljar的目录根据版本的变化,目录结构会变. 前面的版本是org.apache.pool,而后面的版本是org.apache.pool2….

构建一个简易 JavaScript 数据访问层

- Anew - IBM developerWorks 中国 : 文档库
本文逐步描述完成以下任务的全过程:在 PHP 中构建一个针对后端的数据库访问包装器并将其连接到用户界面层中的一个 JavaScript 访问包装器.

【外刊IT评论网】stream.js :一个新的JavaScript数据结构

- gnepud - 外刊IT评论网
最近在网上看到了一个新的Javascript小程序——Streams,起初以为是一个普通的Javascript类库,但读了关于它的介绍后,我发现,这不是一个简单的类库,而且作者的重点也不是这个类库的功能,而是——借用文中的一段话:. 如果你愿意花10分钟的时间来阅读这篇文章,你对编程的认识有可能会被完全的改变(除非你有函数式编程的经验.