Chrome extension - Localstorage not working

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?

标签： javascript google-chrome local-storage

4条回答

干净又极端

2楼-- · 2019-07-23 18:56

To learn how localStorage works and in detail Complete details about LocalStorage is a good source for you to begin with. Just to add I will give you an example which might help you. This is the options.html

<html>
<head>
<script type='text/javscript'>
function save_options() {
    if(document.getElementById("x").checked == true){localStorage['x_en'] = 1;}
    if(document.getElementById("x").checked == false){localStorage['x_en'] = 0;}
}

function restore_options() {
  var x_opt = localStorage['x_en'];
  if (x_opt == 0) {document.getElementById('x').checked = false;}else{
     var select = document.getElementById('x');select.checked = true; localStorage['x_en'] = 1;}
}
</script>
</head>

<body onload="restore_options()">
<table border="0" cellspacing="5" cellpadding="5" align="center">
    <tr class='odd'><td><input type='checkbox' id='x' onclick="save_options()"/></td><td>X</td></tr>
</table>

To access this you need to have a background.html page which can be as shown below.

alert(localStorage['x_en']); //Will alert the localStorage value.

If you want to access the localStorage from the Content Script you can't directly access it by the above method. You need to use the concept called Message Passing (http://code.google.com/chrome/extensions/messaging.html) which can pass the values from the background to content scripts. Just as Sergey said this might be an issue with the typo.

0人赞添加讨论(0) 举报

狗以群分

3楼-- · 2019-07-23 19:09

Using accessors isn’t mandatory, feel free to use [] operator to get and set values, and “in” operator to test if key exists.

However, it looks like there’s a typo in your content script:

var Width;

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

Since JavaScript is case-sensitive, these two are different variables.

0人赞添加讨论(0) 举报

太酷不给撩

4楼-- · 2019-07-23 19:09

try using window.localStorage.getItem/setItem instead of localStorage["site_width"]

0人赞添加讨论(0) 举报

混吃等死

5楼-- · 2019-07-23 19:13

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);

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();
};

0人赞添加讨论(0) 举报

Chrome extension - Localstorage not working

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间