title: how access localstorage using chrome extension
body: <p>I am working on a chrome extension and I am able to successfully store information to local storage, but my issue is actually access that information once it's in local storage. What I have not does not return anything just says NULL.</p>
  
  <p>I have two files: options.html, and content.js. The options.html is where the user will input the information to save to local storage and the content.js will access the information to use.</p>
  
  <p><strong>options.html</strong></p>
  
  <pre><code>$(function() {
      // Insert new buttons (you'd probably not ACTUALLY use buttons, instead saving on blurs or every x seconds)
      $("#save_buttons").after("&lt;input type='submit' value='Save Form' id='saveData'&gt;").after("&lt;input type='submit' value='Clear Saved Data' id='clearData'&gt;");
      $("#saveData").click(function(e) {
          // Don't actually submit form
          e.preventDefault();
  
          // Bit of generic data to test if saved data exists on page load
          localStorage.setItem("flag", "set");
  
          // serializeArray is awesome and powerful
          var data = $("#hanes").serializeArray();
  
          // iterate over results
          $.each(data, function(i, obj) {
              // HTML5 magic!!
              localStorage.setItem(obj.name, obj.value);
          });
      });
  
      // Test if there is already saved data  
      if (localStorage.getItem("flag") == "set") {
          // Tell the user
          $("header").before("&lt;p id='message'&gt;This form has saved data!&lt;/p&gt;");
  
          // Same iteration stuff as before
          var data = $("#hanes").serializeArray();
  
          // Only the only way we can select is by the name attribute, but jQuery is down with that.
          $.each(data, function(i, obj) {
              $("[name='" + obj.name +"']").val(localStorage.getItem(obj.name));
          });
      }
  
      // Provide mechanism to remove data. You'd probably actually remove it not just kill the flag
      $("#clearData").click(function(e) {
          e.preventDefault();
          localStorage.setItem("flag", "");
      });
  });
  
  
  &lt;form id="hanes" name="hanes"&gt;
  First name: &lt;input type="text" name="firstname" id="firstname" /&gt;&lt;br /&gt;
  Last name: &lt;input type="text" name="lastname" /&gt;&lt;br /&gt;
  Address: &lt;input type="text" name="address" /&gt;&lt;br /&gt;
  City: &lt;input type="text" name="city" /&gt;&lt;br /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>background.html</strong></p>
  
  <pre><code>chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
      if (request.method == "firstname")
        sendResponse({status: localStorage['firstname']});
      else
        sendResponse({});
  });
  
  chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
      if (request.method == "lastname")
        sendResponse({status: localStorage['lastname']});
      else
        sendResponse({});
  });
  </code></pre>
  
  <p><strong>content.js</strong></p>
  
  <pre><code>chrome.extension.sendRequest({method: "firstname"}, function(response) {
    alert(response.status);
  });
  
  chrome.extension.sendRequest({method: "lastname"}, function(response) {
    alert(response.status);
  });
  </code></pre>