HTML and CSS Reference
In-Depth Information
to allow models and collections to be stored in
localStorage
. Again, this is clearly a
performance move and doesn't really address syncing data back to the server. But, it is
a more complex use case that manages versioning and migration of the data to newer
versions of the app. In the end, the iPad application gained the following performance
improvements:
• A more responsive application thanks to temporarily storing recently fetched data;
users no longer have to wait for network requests to finish before moving around
the application
• Seamless sharing of fetched data among multiple web views in the native application
• Independence from memory constraints in mobile devices;
localStorage
can store
and populate temporary objects in memory when necessary
• Decreased memory footprint and rendering time while scrolling because compli‐
cated HTML document fragments are stored in
localStorage
Database Syncing with Backbone
A few frameworks allow for data to be synced from
localStorage
back to the server.
For example,
Backbone.js
comes with methods for fetching and saving data models to
and from the server. Out of the box, however, it does not provide the advanced func‐
tionality required by an application that needs to work offline and synchronize with the
server when online. To address this, Neil Bevis of the Dev Camp blog posted an excellent
solution that I'll summarize here. (For the complete blog post, see
http://occdev
Backbone-localstorage.js
provides communication with
localStorage
by simply adding
the JavaScript file to the project. By adding this file, however, you then cannot commu‐
nicate between Backbone and the server with
Backbone.sync
. The first thing you must
do is create a copy of the
Backbone.sync
method before it's replaced by the inclusion of
the
backbone-localstorage.js
JavaScript file:
<script
src=
"backbone.js"
></script>
<script>
Backbone
.
serverSync
=
Backbone
.
sync
;
</script>
<script
src=
"backbone-localstorage.js"
></script>
Now, you'll be able to save data to the server using:
Backbone
.
serverSync
(
'update'
,
model
,
options
);
This gives the standard
model.fetch()
and
model.save()
functions the ability to use
localStorage
. Next, you must provide a
synchronized
flag with a Boolean value de‐
scribing its client-side status. When the client is ready to push local changes to the server
from a given collection, it sends model objects with
synchronized=false
on a model-
by-model basis using:
