HTML and CSS Reference
In-Depth Information
Caching with a timestamp
Most web services allow you to hit their service a limited number of times per day. By
using
localStorage
with a timestamp, you can cache results of web services locally and
access them only after a specified time to refresh the data.
A simple library that allows for this memcache-like behavior is lscache (
https://
github.com/pamelafox/lscache
)
. lscache emulates memcache functions using HTML5
localStorage
, so that you can cache data on the client and associate an expiration time
with each piece of data. If the
localStorage
limit (about 5MB) is exceeded, it tries to
create space by removing the items that are closest to expiring anyway. If
localStor
age
is not available at all in the browser, the library degrades by simply not caching, and
all cache requests return null.
Syncing Data from the Client Side
All of the ways for Web Storage to speed up your web application discussed so far, are
forms of one-way communication for which syncing, or transmitting modified JSON
objects, back to the server is not required. Instead, you simply push data to the browser
and use it as a cache.
Today, companies are just starting to leverage Web Storage to store and sync the object
model back to the server-side database. Such functionality is useful to:
• Allow a web app to function offline, then sync new client data to server
• Allow a web app to function offline, then refresh client data on reconnect
• Allow an offline web app and online server data to be changed, and then sync both
datasets while handling conflicts
Some of these data management and versioning situations can get fairly complex. For
example, LinkedIn recently posted its solution to managing RESTful JSON data with
localStorage
. The company's main reasoning for bringing
localStorage
into the pic‐
ture was to reduce latency and unneeded network requests on its latest iPad app. Ac‐
cording to LinkedIn engineer Akhilesh Gupta:
LinkedIn just released a brand new iPad app built using HTML5,
backbone.js
, and
under
score.js
. The app includes a rich stream of information, which is a combination of network
updates, group posts, and news articles. The user can also switch to specific streams like
Co-Worker updates or news articles from a specific category.
For the full article, see
http://engineering.linkedin.com/mobile/linkedin-ipad-using-local-
At its core, this particular application uses Backbone to manage client-side data models.
The developers then wrote the necessary code to override the basic sync functionality
