如何使用Chrome擴展訪問localstorage

我正在使用chrome擴展，並且能夠將信息成功存儲到本地存儲，但是我的問題實際上是在本地存儲中訪問該信息。我沒有不返回任何東西只是說NULL。如何使用Chrome擴展訪問localstorage

我有兩個文件：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); 
});

來源

2012-04-08 Mr. 1.0

如果您查看'options.html'上的[resources tab]（https://developers.google.com/chrome-developer-tools/docs/resources），您是否在本地存儲下看到預期的數據？ – abraham 2012-04-09 04:36:32

@abraham是的，我能夠在本地存儲下的資源選項卡中看到所有數據，並且能夠使用「消息傳遞」功能來處理它。我更新了代碼，你能解釋我怎麼能從本地存儲中調用每一條數據，我不知道如何給它們打電話。我只知道如何打電話給我。 – 2012-04-09 19:04:40

內容腳本運行在他們自己的小世界裏，甚至在你的擴展的世界之外（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?）。

來源

2012-04-09 08:42:34 PAEz

亞伯拉罕是正確的使用括號，而不是括號，但這是答案。內容腳本中的'localStorage'指的是它被注入的頁面的'localStorage'。 – 2012-04-09 09:48:26

@PAEz'消息傳遞'作品謝謝，但我如何訪問本地存儲中的所有數據？我更新了我的代碼。 – 2012-04-09 19:29:53

@ Mr.1.0我沒有嘗試過你的代碼，但是這對我來說很合適。如果你在一次調用中詢問如何訪問所有localStorage，我想你可以執行'JSON.stringify（localStorage）'並將它發送回內容腳本。雖然通常我只是用我想要的所有東西製作一個對象，然後將其串化爲內容腳本。 – PAEz 2012-04-09 19:43:03

使用()而不是[]。

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

來源

2012-04-08 18:03:53 abraham

，這也給我'null' – 2012-04-08 18:11:00

如何使用Chrome擴展訪問localstorage

回答

相關問題