Question

我正在撰写Chrome扩展程序，该扩展程序使用内容脚本修改网站的某些部分。内容脚本正常工作，直到我尝试将选项页面添加到我的扩展程序。

现在我正在使用options.html文件将用户首选项保存到localstorage，如下所示：

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

我还有一个background.html文件来处理内容脚本和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>

然后是实际的内容脚本，如下所示：

var Width;

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

这些代码都不起作用。它看起来很坚固，但我不是一个非常有经验的程序员，所以我可能错了。

有人可以用外行的话来解释本地存储吗？

Answer 1

window.localStorage包含需要使用的getter和setter才能访问内部对象映射。

所以，设置：

localStorage.setItem(key, value);

获得：

localStorage.getItem(key);

清除地图：

localStorage.clear();

删除项目：

localStorage.removeItem(key);

获得长度：

localStorage.length

根据内部地图中的索引键入：

localStorage.key(index);

阅读更多内容：http://dev.w3.org/html5/webstorage/#the-storage-interface

window.localStorage实现Storage接口：

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

Answer 2

要了解localStorage的工作原理和详细信息，Complete details about LocalStorage是您开始使用的好资源。只是添加我会给你一个可能对你有帮助的例子。这是 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>

要访问此内容，您需要有一个background.html页面，如下所示。

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

如果要从内容脚本访问localStorage，则无法通过上述方法直接访问它。您需要使用名为Message Passing（http://code.google.com/chrome/extensions/messaging.html）的概念，它可以将值从后台传递到内容脚本。正如谢尔盖所说，这可能是错字的问题。

Answer 3

使用访问器不是强制性的，可以使用[]运算符来获取和设置值，并使用“in”运算符来测试密钥是否存在。

但是，您的内容脚本中似乎存在拼写错误：

var 宽度;

chrome.extension.sendRequest（{方法：   “siteWidth”}，function（response）{           宽度 = response.status;       }）;

由于JavaScript区分大小写，因此这两个变量是不同的。

Answer 4

尝试使用window.localStorage.getItem/setItem代替localStorage["site_width"]

Chrome扩展程序 - Localstorage无效

4 个答案: