本地存储不起作用
我正在编写一个Chrome扩展程序，它使用内容脚本来修改网站的某些部分。 内容脚本工作正常，直到我试图将选项页面添加到我的扩展。
现在，我使用options.html文件将用户首选项保存到localstorage，如下所示：
<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文件来处理内容脚本和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;}
}
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）这个概念，它可以将后台的值传递给内容脚本。 正如Sergey所说，这可能是一个错字问题。
window.localStorage具有需要使用的getter和setter来访问内部对象映射。
所以，要设置：
localStorage.setItem(key, value);
要得到：
localStorage.getItem(key);
要清除地图：
localStorage.clear();
删除项目：
localStorage.removeItem(key);
为了获得长度：
localStorage.length
要基于内部映射中的索引键：
localStorage.key(index);
要阅读更多信息：http://dev.w3.org/html5/webstorage/#the-storage-interface
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();
};
使用访问器并不是强制性的，可以随意使用[]运算符来获取和设置值，并且使用“in”运算符来测试密钥是否存在。
但是，看起来您的内容脚本中存在拼写错误：
var Width ;
chrome.extension.sendRequest（{method：“siteWidth”}，function（response）{ width = response.status;}）;
由于JavaScript区分大小写，因此这两个是不同的变量。
链接地址: http://www.djcxy.com/p/91113.html