Chrome扩展程序 - Local Storage不起作用 [英] Chrome extension - Localstorage not working
问题描述
我正在撰写一个Chrome扩展程序，它使用内容脚本来修改网站的某些部分。内容脚本工作正常，直到我试图添加一个选项页到我的扩展名。
现在，我使用options.html文件将用户首选项保存到localstorage，正如你在这里看到的那样：
< html>
< head>< title>选项< / 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;
}
函数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;
休息;
}
}
}
< / script>
< body onload =restore_options（）>
宽度：
< 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（）>储存< /按钮>
< / 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;
}）;
这些代码实际上都不起作用。它看起来不错，但我不是一个非常有经验的程序员，所以我可能是错的。
有人可以用外行人的话来解释本地存储吗？
了解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;}
}
函数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 =0cellspacing =5cellpadding =5align =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']）; //将提醒localStorage值。
如果您想从Content Script访问localStorage，则无法通过上述方式直接访问它方法。您需要使用称为Message Passing的概念（ http://code.google.com/chrome /extensions/messaging.html ），它可以将背景值传递给内容脚本。正如Sergey所说，这可能是一个错字问题。
I'm writing a Chrome extension that uses a content script to modify certain parts of a website. The content script worked fine until I tried to add an options page to my extension.
Right now I'm using an options.html file to save user preferences to localstorage, as you can see here:
<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>
I also have a background.html file to handle the communication between the content script and the 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>
Then there's the actual content script that looks like this:
var Width;
chrome.extension.sendRequest({method: "siteWidth"}, function(response) {
width = response.status;
});
None of that code actually works. It looks solid enough to me but I'm not a very experienced programmer so I might be wrong.
Could someone explain localstorage to me in layman's terms?
To learn how localStorage works and in detail Complete details about LocalStorage is a good source for you to begin with. Just to add I will give you an example which might help you. This is the 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>
To access this you need to have a background.html page which can be as shown below.
alert(localStorage['x_en']); //Will alert the localStorage value.
If you want to access the localStorage from the Content Script you can't directly access it by the above method. You need to use the concept called Message Passing (http://code.google.com/chrome/extensions/messaging.html) which can pass the values from the background to content scripts. Just as Sergey said this might be an issue with the typo.
这篇关于Chrome扩展程序 - Local Storage不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
