title: restoring application data array after refresh HTML 5 Localstorage
body: <p>I have an array that my application depends on for rendering figures and divs. I wish  to store this locally through HTML 5 localStorage API. Here's my JS code</p>
  
  <pre><code>var app = {
  slidePreviews: "",
  slideDuration: 7000,
  presentation: {
      title: "",
      theme: "themeName",
      slides: []
  },
  themes: [{
      name: "white",
      css: "whitetheme",
      slideControls: ""
  }, {
      name: "black",
      css: "blacktheme",
      slideControls: ""
  }, {
      name: "red",
      css: "redtheme",
      slideControls: ""
  }, {
      name: "blue",
      css: "bluetheme",
      slideControls: ""
  }, {
      name: "orange",
      css: "orangetheme",
      slideControls: ""
  }, {
      name: "green",
      css: "greentheme",
      slideControls: ""
  }]
  };
  
  $(document).ready(function () {
  
  var saved = false;
  
  var handlers = {
  
      savePresentationData: function(event){
  
          // Place the app object into storage
          localStorage.setItem("app", JSON.stringify(app));
  
          // Retrieves the object app from HTML 5 local storage
          var retrievedObject = localStorage.getItem("app");
  
          console.log("retrievedObject: ", JSON.parse(retrievedObject));
  
          var savedData = JSON.parse(retrievedObject);
  
          var saved = true;
          return savedData;
      },
  
      clearAppData: function(event){
          localStorage.clear();
          return false;
      }
  
  };
  
  //use localstorage to restore presentaton data
  if(saved){
      app = JSON.parse(retrievedObject);
  }
  </code></pre>
  
  <p>I am not sure if I am doing this right. It is not working upon refresh. Upon refresh, the app object does not contain the data I saved before. </p>
  
  <p>ANy suggestions? </p>