The request JSON data is cached using localstorage Based on Backbone. js.

JSON request data is cached Based on backbone and zepto users,

The basic function is to increase the localstorage transfer;

Background Data --"Localstorage-"Page ..

Each time the data is retrieved from localstorage, the background data is updated to localstorage.

Libraries used: zepto. js and backbone. js. Of course, you don't need to use these two libraries for a slight change. I posted them directly. Too lazy to change

(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. pa RSE (store) | |{};}, vessels ={}, mystore ;_. extend (store. prototype, {// Save the current state of the ** store ** to * localstorage *. save: function () {// console. log (this. from ', decodeuricomponent (_. map (this. data, function (Val, key) {return key}) [0]), 'cached data'); localstorage. setitem (this. name, JSON. stringify (this. data) ;}, // Add a model, giving it a (hopefully)-unique guid, if it doesn't alread Y // 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. da Ta '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); // Add successCode Save it in localstorage options. success = function (resp, status, xhr) {resp. _ id = ID; mystore. create (RESP); // execute the success defined by backbone fetch. apply (options, arguments) ;}; $. later (function () {If (ID & $. isobject (RESP = mystore. find (ID) {// modify the success method of the Ajax request, and save it only to localstorage options. success = function (resp, status, xhr) {resp. _ id = ID; mystore. create (RESP);} // console. log ('number of read Self-cache'); 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 );

The usage is simple:

  1   var  collection =  New   backbone. collection. extend ({  2  Sync: $.  sync ('zhangnan ', 100) // key value saved in localstorage in parameter 1, parameter 2 expiration time   3 });