Estás en el camino correcto, pero almacena tus datos en JavaScript principalmente. Y acoplarlo con almacenamiento local cuando sea adecuado.
Cuando construyo aplicaciones como la que está describiendo, generalmente me ocupo de configurar las representaciones de JavaScript de los datos que recibo a través de la API.
Una de estas representaciones podría verse a continuación. Tenga en cuenta que mi código de ejemplo a continuación hace un par de suposiciones.
- Se hace la suposición de que se tiene un objeto definido
api que se encarga de llamadas a la API, e invoca una devolución de llamada en la terminación.
- que los datos devueltos por la API son JSON que simplemente se pueden asignar a una variable de JavaScript,
- Que el JSON devuelto es una lista de objetos, cada uno con un campo "id".
- Que tiene algún tipo de objeto de evento, generalmente construyo mis propios eventos personalizados que básicamente llevan objetos
function como oyentes y cuando se disparan pasan por los oyentes e invocan las funciones con o sin una carga útil según la situación.
Datos ejemplo contenedor:
MYAPP.data.BaseContainer = function (api_url, loadedEvent) {
var self = {
// Array to store the data returned via the APIs
_data : [],
// The API URL used to fetch data
api_url : api_url,
// Boolean flag to signify whether the _data variable has been populated
is_loaded : false,
// The even to fire once _data has been populated
loadedEvent : loadedEvent,
/**
* Returns the state of the is_loaded variable
*/
loaded : function() {
return self.is_loaded;
},
/**
* Takes an ID and returns any member of the _data array
* that has that ID.
*
* @param id : an String or integer representing the ID.
* @returns {Object}
*/
byId : function (id) {
var toReturn = null;
for (var i = 0, len = self._data.length; i < len; i++) {
if (self._data[i].id == id) {
toReturn = self._data[i];
break;
}
}
return toReturn;
},
/**
* Returns the entire _data array.
*/
all : function() {
return self._data;
},
/**
* This simple callback just stores the json response in
* its entirety on the _data variable.
*/
callback : function(data) {
self._data = data;
self.is_loaded = true;
loadedEvent.fire(self._data);
},
/**
* Calls the API, if no callback has been specified as a parameter
* self.callback is used.
*/
getFromAPI : function(callback) {
if (typeof callback === 'undefined') {
callback = self.callback;
}
api.get(self.api_url, callback);
}
};
self.getFromAPI();
return self;
};
Con este plan ahora puedo crear contenedores de datos específicos de esta manera:
/**
* Stores a list of "friends" gotten from the API.
* This is basically an instance of the BaseContainer object defined above.
*/
MYAPP.data.Friends = (function() {
var self = MYAPP.data.BaseContainer("API_URL_TO_FECTH_FRIENDS_LIST", FriendsLoadedEvent);
return {
byId : self.byId,
all : self.all,
loaded : self.loaded
};
}());
Tan pronto como se ejecuta este código, se hace una llamada a la API y el FriendsLoadedEvent se disparará cuando esté listo. Entonces, para decirlo sin rodeos, utilizo JavaScript para almacenar mis cosas por lo general. ¡Pero si quieres lanzar LocalStorage en la mezcla también es fácil!
Simplemente agregue código de almacenamiento local al objeto BaseContainer que primero detecta si el cliente realmente admite el almacenamiento local, y si es así espeja el campo _data en el almacenamiento local. Esto es útil para mantener los datos utilizados con frecuencia disponibles rápidamente entre sesiones. Utilice las herramientas de análisis JSON disponibles para convertir los datos de JSON a LocalStorage "texto" y viceversa.
Solo tenga en cuenta que no puede confiar en LocalStorage como estructura de datos primaria, no tiene garantía de que el cliente lo admita, e incluso cuando hace los límites superiores de la cantidad de datos que puede almacenar es diferente entre navegadores. A fin de utilizarlo para almacenar datos que:
- desea acceder a muy a menudo,
- que se siente debe ser sólo allí, inmediatamente tan pronto como el usuario se conecta,
- y que no cambia con frecuencia lo suficiente como para garantizar refrescantes llamadas API constantemente.
¿Por qué el voto hacia abajo? –
No te voté, ni siquiera tengo esa función desbloqueada. Si tuviera que adivinar, alguien malinterpretó tu respuesta como sarcasmo. – Steve