Cacheing JSON Responses

JavaScript
1

How do you cache JSON responses? The real question I am asking is if my app is offline how can I still make lists and articles that have already beenpulled from the earlier online request available, if the person no longer has access to the internet

2

You could use HTML5’s LocalStorage. You’ll have to use a polyfill to patch in support for older browsers though; alas, you’re using JavaScript already, so that shouldn’t be a drawback :slight_smile:

AmplifyJS has a component for abstracting Local Storage away and polyfilling support for older browsers [URL=“http://amplifyjs.com/api/store/”]http://amplifyjs.com/api/store/
(There are a few other polyfills available too, see https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills)

3

Its an app am building with phonegap so I know the browser will support it based on the OS I am using. But how do I go about storing the responses?

4

In that case you could simply use the localStorage directly without worrying about using a library. (Having said that, I’ve used jStorage before and found it to be very helpful as an abstraction layer. It normally runs with a library like jQuery or Prototype, but you can use it without such libraries as well.)

http://diveintohtml5.info/storage.html explains HTML5 storage pretty well.

The basics are:


// JSON objects can be stored
localStorage.setItem( "foo", JSON.stringify( { "json":"object", "of": "values" } ) ); 
// ---> Note that we need to stringify JSON objects as localStorage will store everything as a string

// Of course regular strings are easy too
localStorage.setItem( "bar", "A string!" );


console.log( JSON.parse( localStorage.getItem("foo") ) );
console.log( localStorage.getItem("bar") );
5

Ok so let me see if I go this straight…displaying my jason results in an array after pulling the info from a server. So am guessing that before I do this I should store the results in localstorage. So when a user clicks on a link to get a list of articles I should first test if there is a internet connection if yes go to server to get JSON response. If no internet connection then pull the results from localstorage. If this is the case then I should always check if localstorage is empty if it is empty then tell the user they need to try again when they are connected to the internet.

Does that sound like the correct solution?

And am also guessing that I should pull the list of articles and the corresponding articles in localstorage so that the offline mode will actually have something meaningful to show

6

I guess your flow could look something like this

  • User enters your app.
  • If possible use a method to detect whether there is WiFi or 3G available - this can be your identifier for whether there is connectivity.
  • Try to get data from server
    [LIST]
  • If can get data from server:
    [LIST]
  • Display data from server
  • Store latest in local storage
    [/LIST]
  • If can’t get data (for whatever reason, no internet, server down, gremlins in the air):
    [LIST]
  • Check local storage
    [LIST]
  • if local storage is empty, display error
  • if local storage has data, show data but show out of date warning
    [/LIST]
    [/LIST]
    [/LIST]
  • User clicks link / performs action
    [LIST]
  • Try to get data from server…
    [/LIST]

I’ve put together a flow diagram that might help visualise it a bit better (PDF on my server & attached as a file)

7

nb. you don’t actually need to use setItem and getItem, square-bracket notation is fine:

window.localStorage["foo"] = "bar";

console.log( window.localStorage["foo"] );

There’s also sessionStorage which works exactly the same way except that the data you keep there is automatically deleted at the end of the session (whereas localStorage values persist across sessions, and are global to the host domain). Because of that difference, it’s better to use sessionStorage if the data doesn’t need to persist.

8

Oh hello James. Haven’t seen you here for a while. Welcome back!

Have you tried the Web SQL DB by any chance? (http://diveintohtml5.info/storage.html#future)

Says it works on iPhone 3+ - so could be an interesting thing to use for PhoneGap apps that need a fair bit of local data. (Though apparently that spec is no longer being maintained… http://caniuse.com/#feat=sql-storage, IndexedDB looks like it might get adopted - alas no legacy iOS support with it then http://caniuse.com/#feat=indexeddb)