Chrome extension - Localstorage not working
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 us开发者_运维技巧er 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?
The window.localStorage has getters and setters that need to be used in order to access the internal object map.
So, to set:
localStorage.setItem(key, value);
To get:
localStorage.getItem(key);
To clear map:
localStorage.clear();
To remove item:
localStorage.removeItem(key);
To get length:
localStorage.length
To key based on index in internal map:
localStorage.key(index);
To read more: http://dev.w3.org/html5/webstorage/#the-storage-interface
The window.localStorage implements the Storage interface:
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();
};
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.
Using accessors isn’t mandatory, feel free to use [] operator to get and set values, and “in” operator to test if key exists.
However, it looks like there’s a typo in your content script:
var Width;
chrome.extension.sendRequest({method: "siteWidth"}, function(response) { width = response.status; });
Since JavaScript is case-sensitive, these two are different variables.
try using window.localStorage.getItem/setItem instead of localStorage["site_width"]
加载中,请稍侯......
精彩评论