Chrome 扩展程序 - 本地存储不起作用答案

【问题标题】：Chrome extension - Localstorage not workingChrome 扩展程序 - 本地存储不起作用
【发布时间】：2011-07-16 11:08:33
【问题描述】：

我正在编写一个 Chrome 扩展程序，它使用内容脚本来修改网站的某些部分。在我尝试将选项页面添加到我的扩展程序之前，内容脚本运行良好。

现在我正在使用 options.html 文件将用户首选项保存到本地存储，您可以在此处看到：

    <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 文件来处理内容脚本和本地存储之间的通信：

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

这些代码实际上都不起作用。它对我来说看起来足够可靠，但我不是一个非常有经验的程序员，所以我可能错了。

谁能通俗地向我解释一下localstorage？

【问题讨论】：

标签： javascript google-chrome local-storage

【解决方案1】：

要详细了解 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.

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

【讨论】：

引用 rajdeepd.com/articles/chrome/localstrg/LocalStorageSample.htm 已死
@olegtaranenko 这是一面镜子web.archive.org/web/20100106033106/http://www.rajdeepd.com/…

【解决方案2】：

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

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

var 宽度;

chrome.extension.sendRequest({方法： “站点宽度”}，函数（响应）{ 宽度 = response.status; });

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

【讨论】：

【解决方案3】：

尝试使用window.localStorage.getItem/setItem 而不是localStorage["site_width"]

【讨论】：

【解决方案4】：

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

所以，设置：

localStorage.setItem(key, value);

获得：

localStorage.getItem(key);

清除地图：

localStorage.clear();

要删除项目：

localStorage.removeItem(key);

获取长度：

localStorage.length

基于内部映射中的索引键：

localStorage.key(index);

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

【讨论】：

当然，但使用 localStorage["key"] 语法也是有效的。为什么它在问题代码中不起作用？