SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Cacheing JSON Responses

    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. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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 :-)

    AmplifyJS has a component for abstracting Local Storage away and polyfilling support for older browsers http://amplifyjs.com/api/store/
    (There are a few other polyfills available too, see https://github.com/Modernizr/Moderni...wser-Polyfills)
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    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 :-)

    AmplifyJS has a component for abstracting Local Storage away and polyfilling support for older browsers http://amplifyjs.com/api/store/
    (There are a few other polyfills available too, see https://github.com/Modernizr/Moderni...wser-Polyfills)
    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. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by skelleex View Post
    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?
    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:

    Code javascript:
    // 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") );
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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
      • If can get data from server:
        • Display data from server
        • Store latest in local storage
      • If can't get data (for whatever reason, no internet, server down, gremlins in the air):
        • Check local storage
          • if local storage is empty, display error
          • if local storage has data, show data but show out of date warning
    • User clicks link / performs action
      • Try to get data from server...


    I've put together a flow diagram that might help visualise it a bit better (PDF on my server & attached as a file)
    Attached Files Attached Files
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  7. #7
    SitePoint Guru
    Join Date
    Mar 2004
    Location
    Earth
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nb. you don't actually need to use setItem and getItem, square-bracket notation is fine:

    Code JavaScript:
    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. #8
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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)
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •