title: Storing Json in localStorage
body: <p>I would like to store search results as cache in localStorage.</p>
  
  <p>I would like to store all the cache as one localStorage value:</p>
  
  <pre><code>localStorage.getItem('search-cache')
  </code></pre>
  
  <p>Inside it I would like to have JSON object which I can add properties and retreive them.
  Unfortunately it doesn't work and the localStorage is not updated with the json results (its value keep being <code>'{}'</code>).</p>
  
  <p>I am not a javascript proffesional so please guide me how to do it well.</p>
  
  <p>Here is the current code to cache results:</p>
  
  <pre><code>    var query = $(this).val();
  
      var cache = JSON.parse(localStorage.getItem('search-cache'));
  
      if (cache == null) {
          cache = '[{}]';
      }
  
      if (cache[query] == null) {
  
          $.getJSON('/api/guides/search?query=' + query, function (data) {
              $.each(data, function (index, guide) {
                  $('#results').append('&lt;li class="result-item"&gt;' + guide.Name + '&lt;/li&gt;');
              });
  
              cache[query] = data;
              localStorage.setItem('search-cache', JSON.stringify(cache));
          });
      }
      else {
          $.each(JSON.parse(localStorage.getItem('search-cache')[query]), function (index, guide) {
              $('#results').append('&lt;li class="result-item"&gt;' + guide.Name + '&lt;/li&gt;');
          });
  
      }
  </code></pre>