title: Chrome extension - Localstorage not working
body: <p>I'm writing a Chrome extension that uses a content script to modify certain parts of a website.  The content script worked fine until I tried to add an options page to my extension.</p>
  
  <p>Right now I'm using an options.html file to save user preferences to localstorage, as you can see here:</p>
  
  <pre><code>    &lt;html&gt;
      &lt;head&gt;&lt;title&gt;Options&lt;/title&gt;&lt;/head&gt;
          &lt;script type="text/javascript"&gt;
  
          function save_options() {
              var select = document.getElementById("width");
              var width = select.children[select.selectedIndex].value;
              localStorage["site_width"] = width;
          }
  
          function restore_options() {
            var fwidth = localStorage["site_width"];
            if (!fwidth) {
              return;
            }
            var select = document.getElementById("width");
            for (var i = 0; i &lt; select.children.length; i++) {
              var child = select.children[i];
              if (child.value == fwidth) {
                child.selected = "true";
                break;
              }
            }
          }
  
          &lt;/script&gt;
  
      &lt;body onload="restore_options()"&gt;
  
      Width:
          &lt;select id="width"&gt;
              &lt;option value="100%"&gt;100%&lt;/option&gt;
              &lt;option value="90%"&gt;90%&lt;/option&gt;
              &lt;option value="80%"&gt;80%&lt;/option&gt;
              &lt;option value="70%"&gt;70%&lt;/option&gt;
          &lt;/select&gt;
  
          &lt;br&gt;
          &lt;button onclick="save_options()"&gt;Save&lt;/button&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I also have a background.html file to handle the communication between the content script and the localstorage:</p>
  
  <pre><code>&lt;html&gt;
      &lt;script type="text/javascript"&gt;
  
          chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
              if (request.method == "siteWidth")
                  sendResponse({status: localStorage["site_width"]});
              else
                  sendResponse({});
          });
  
      &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Then there's the actual content script that looks like this:</p>
  
  <pre><code>var Width;
  
  chrome.extension.sendRequest({method: "siteWidth"}, function(response) {
          width = response.status;
      });
  </code></pre>
  
  <p>None of that code actually works.  It looks solid enough to me but I'm not a very experienced programmer so I might be wrong.</p>
  
  <p>Could someone explain localstorage to me in layman's terms?</p>