如何使用 chrome 扩展访问 localstorage

Question

我正在开发一个 chrome 扩展，我能够成功地将信息存储到本地存储中，但我的问题实际上是在本地存储中访问该信息。我没有返回任何东西，只是说 NULL。

我有两个文件：options.html 和 content.js。 options.html 是用户输入信息以保存到本地存储的地方，而 content.js 将访问要使用的信息。

options.html

$(function() {
    // Insert new buttons (you'd probably not ACTUALLY use buttons, instead saving on blurs or every x seconds)
    $("#save_buttons").after("<input type='submit' value='Save Form' id='saveData'>").after("<input type='submit' value='Clear Saved Data' id='clearData'>");
    $("#saveData").click(function(e) {
        // Don't actually submit form
        e.preventDefault();

        // Bit of generic data to test if saved data exists on page load
        localStorage.setItem("flag", "set");

        // serializeArray is awesome and powerful
        var data = $("#hanes").serializeArray();

        // iterate over results
        $.each(data, function(i, obj) {
            // HTML5 magic!!
            localStorage.setItem(obj.name, obj.value);
        });
    });

    // Test if there is already saved data  
    if (localStorage.getItem("flag") == "set") {
        // Tell the user
        $("header").before("<p id='message'>This form has saved data!</p>");

        // Same iteration stuff as before
        var data = $("#hanes").serializeArray();

        // Only the only way we can select is by the name attribute, but jQuery is down with that.
        $.each(data, function(i, obj) {
            $("[name='" + obj.name +"']").val(localStorage.getItem(obj.name));
        });
    }

    // Provide mechanism to remove data. You'd probably actually remove it not just kill the flag
    $("#clearData").click(function(e) {
        e.preventDefault();
        localStorage.setItem("flag", "");
    });
});


<form id="hanes" name="hanes">
First name: <input type="text" name="firstname" id="firstname" /><br />
Last name: <input type="text" name="lastname" /><br />
Address: <input type="text" name="address" /><br />
City: <input type="text" name="city" /><br />
</form>

background.html

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

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

content.js

chrome.extension.sendRequest({method: "firstname"}, function(response) {
  alert(response.status);
});

chrome.extension.sendRequest({method: "lastname"}, function(response) {
  alert(response.status);
});

Answer 1

内容脚本在它们自己的小世界中运行，甚至在您的扩展程序的世界之外 (Chrome extension code vs Content scripts vs Injected scripts)。内容脚本无法访问您的扩展程序的 localStorage。
因此，您需要使用消息传递 (http://code.google.com/chrome/extensions/messaging.html) 与后台页面进行通信，或者如果您真的想避免使用后台页面，您可以使用 iFrame 技巧 (Options-enabled content-script Chrome extension without background page?)。

Answer 2

使用() 而不是[]。

var fname = window.localStorage.getItem('firstname');