基于backbone.js使用localstorage来缓存请求的json数据。

基于backbone和zepto用户缓存json请求数据，

　　基本作用是：增加localstorage存储中转；

　　后台数据--》localstorage-》页面。。

　　每次数据去localstorage取，然后把后台数据更新到localstorage里面

用到的库：zepto.js和Backbone.js，当然稍微改一下就不需要基于这2个库的，我就直接张贴来了。懒得改了

(function($){

var getValue = function(object, prop) {

if (!(object && object[prop])) return null;

return _.isFunction(object[prop]) ? object[prop]() : object[prop];

},
isCache = true,
requestSteps= [];

try {
localStorage.setItem('cache','test');
} catch (e) {
isCache = false;
}

var Store = $.localStorage = function(name, uptime) {

var minutes = 1000*60;

this.name = name;

this.uptime= ((typeof (+uptime)==='number' && uptime > 0 && uptime  ) ||  1500) * minutes;
var store = localStorage.getItem(this.name);

this.data = (store && JSON.parse(store)) || {};

},

vessels = {},
myStore;

_.extend(Store .prototype,{

// Save the current state of the **Store** to *localStorage*.
save: function() {

//				  console.log(this.name,'中更新了来自 ',decodeURIComponent(_.map(this.data,function(val,key){return key})[0]),'的缓存数据');
localStorage.setItem(this.name, JSON.stringify(this.data));
},

// Add a model, giving it a (hopefully)-unique GUID, if it doesn't already
// have an id of it's own.
create: function(model) {
//if (!model.id) model.set(model.idAttribute, guid());
model.__time= Date.now();

this.data[model.__id] = model;
// $.cookie(model.__id, this.name+Date.now() , {expires: date});

this.save();
return model;
},

// Update a model by replacing its copy in `this.data`.
update: function(model) {
model.__time= Date.now();
this.data[model.__id] = model;
this.save();
return model;
},

// Retrieve a model from `this.data` by id.
find: function(id) {
var model= this.data[id],
time= Date.now(),
uptime= this.uptime;

return $.isObject(model) && (typeof (+model.__time) ==='number') && (time - model.__time < uptime) ? model : false;
},

// Return the array of all models currently in storage.
findAll: function() {
return _.values(this.data);
},

// Delete a model from `this.data`, returning it.
destroy: function(model) {
delete this.data[model.__id];
this.save();
return model;
}

});

var sync= function(method, model, options){
var options = options ? _.clone(options) : {},
url= options.url,
success= options.success,
id,
resp,
ajaxtime = 500,
setTime = null,
self = this;

if(!url){

url= getValue(model, 'url');

}

id= encodeURIComponent(url);

//将success添加一段代码将起保存在localStorage里面

options.success = function(resp, status, xhr) {

resp.__id= id;
myStore.create(resp);

//执行backbone fetch定义的success

success.apply(options , arguments);

};

$.later(function(){

if(id && $.isObject(resp= myStore.find(id)) ){
//修改正在请求的ajax的success方法,仅保存到localStorage里面

options.success = function(resp, status, xhr){

resp.__id= id;
myStore.create(resp);
}

//			    			console.log('读取自缓存数去');

success.call(options , resp, 'success' , null);

}

Backbone.sync.call(self, 'read', self, options);

},10);
}

$.sync= function(name,date){
if(isCache){
myStore= vessels[name] || (vessels[name]= new Store(name, date));
return sync;
}else{
return function(method, model, options){
Backbone.sync.call(this, method, this, options);
}
}
}

})(Zepto);

　　使用方法很简单：

var collection =new Backbone.Collection.extend({
sync : $.sync('zhangnan',100)//参数1保存在localstorage里面的key值，参数2过期时间
});