Javascript – Chrome extension – Localstorage not working

google-chromejavascriptlocal-storage

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.

Right now I'm using an options.html file to save user preferences to localstorage, as you can see here:

    <html>
    <head><title>Options</title></head>
        <script type="text/javascript">

        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 < select.children.length; i++) {
            var child = select.children[i];
            if (child.value == fwidth) {
              child.selected = "true";
              break;
            }
          }
        }

        </script>

    <body onload="restore_options()">

    Width:
        <select id="width">
            <option value="100%">100%</option>
            <option value="90%">90%</option>
            <option value="80%">80%</option>
            <option value="70%">70%</option>
        </select>

        <br>
        <button onclick="save_options()">Save</button>
    </body>
</html>

I also have a background.html file to handle the communication between the content script and the localstorage:

<html>
    <script type="text/javascript">

        chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
            if (request.method == "siteWidth")
                sendResponse({status: localStorage["site_width"]});
            else
                sendResponse({});
        });

    </script>
</html>

Then there's the actual content script that looks like this:

var Width;

chrome.extension.sendRequest({method: "siteWidth"}, function(response) {
        width = response.status;
    });

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.

Could someone explain localstorage to me in layman's terms?

Best Answer

The window.localStorage has getters and setters that need to be used in order to access the internal object map.

So, to set:

localStorage.setItem(key, value);

To get:

localStorage.getItem(key);

To clear map:

localStorage.clear();

To remove item:

localStorage.removeItem(key);

To get length:

localStorage.length

To key based on index in internal map:

localStorage.key(index);

To read more: http://dev.w3.org/html5/webstorage/#the-storage-interface

The window.localStorage implements the Storage interface:

interface Storage {
 readonly attribute unsigned long length;
 DOMString key(in unsigned long index);
 getter any getItem(in DOMString key);
 setter creator void setItem(in DOMString key, in any value);
 deleter void removeItem(in DOMString key);
 void clear();
};
Related Topic