如何使用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);
});
内容脚本运行在他们自己的小世界里,甚至在你的扩展的世界之外(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?)。
亚伯拉罕是正确的使用括号,而不是括号,但这是答案。内容脚本中的'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');
,这也给我'null' – 2012-04-08 18:11:00
如果您查看'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