Chrome扩展程序-Localstorage无法正常工作

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的工作原理，您可以从中找到有关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，则无法通过上述方法直接访问它。 您需要使用称为消息传递（ http://code.google.com/chrome/extensions/messaging.html ）的概念，该概念可以将值从后台传递到内容脚本。 正如谢尔盖（Sergey）所说，这可能是拼写错误的问题。

Answer 3

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

但是，您的内容脚本中似乎有一个错字：

var Width ;

chrome.extension.sendRequest（{method：“ siteWidth”}，function（response）{ width = response.status;}）;

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

Answer 4

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

Chrome扩展程序-Localstorage无法正常工作

问题描述

4 个解决方案

解决方案1
3 2011-03-16 09:59:57

解决方案2
2 已采纳 2011-03-20 08:04:46

解决方案3
0 2011-03-16 19:28:28

解决方案4
-1 2011-03-16 10:02:46

Chrome扩展程序-Localstorage无法正常工作

问题描述

4 个解决方案

解决方案1 3 2011-03-16 09:59:57

解决方案2 2 已采纳 2011-03-20 08:04:46

解决方案3 0 2011-03-16 19:28:28

解决方案4 -1 2011-03-16 10:02:46

解决方案1
3 2011-03-16 09:59:57

解决方案2
2 已采纳 2011-03-20 08:04:46

解决方案3
0 2011-03-16 19:28:28

解决方案4
-1 2011-03-16 10:02:46