title: Caching a Kendo UI DataSource object using localStorage
body: <p>I am using the Kendo UI ComboBox with an external, XML DataSource. Here's the DataSource code:</p>
  
  <pre><code>try
      {
          var csDataSrc = new kendo.data.DataSource(
          {
              transport:
          {
              read: "Data/StateList.xml",
              dataType: "xml",
              create: { cache: true }
          },
          schema:
          {
              type: "xml",
              data: "/States/State",
              model:
              {
                  fields:
                  {
                      id: "id/text()",
                      name: "name/text()"
                  }
              }
          }
      });
      csDataSrc.read();
  }
  catch (err)
  {
      log.error(err.message);
  }
  </code></pre>
  
  <p>That creates the data source, here's the code that creates the kendo combobox:</p>
  
  <pre><code>$("#stateList").kendoComboBox(
  {
      index: 0,
      placeholder: "Begin typing Coverage State...",
      dataTextField: "name",
      dataValueField: "id",
      filter: "contains",
      dataSource: csDataSrc,
      text: $("#hdnStateName").val(),
      value: $("#hdnStateKey").val(),
      change: function(e)
      {
          $("#hdnStateKey").val(this.value());
          $("#hdnStateName").val(this.text());
      }
  });
  </code></pre>
  
  <p>This works really well but the data for the real list is enormous and I'd like to store it in local storage with something like this:
      localStorage.setItem("state_key", csDataSrc);
  Then when the page loads instead of building and reading from the server side xml all the time, I'd like for it to be something like this:</p>
  
  <pre><code>var csDataSrc = localStorage.getItem("state_key");
  if(csDataSrc === null)
  {
      // create the data source with the above code
      // and store it in localStorage.
  }
  </code></pre>
  
  <p>Then bind it here...</p>
  
  <pre><code>...kendoComboBox(
  {
      ...,
      .dataSource: csDataSrc,
      ...
  });
  </code></pre>
  
  <p>I create the data source fine, it seems to store correctly in localStorage but when you leave the page and come back the data source is always null.  I can see it using the resources tab of the Chrome developer tools but it won't bind to the combo box correctly.
  Any help or if I need to elaborate on anything to make this clearer please let me know</p>
  
  <p>Thanks
  -s</p>