The event that should be fired when localStorage is changed seems to be lacking information in Firefox.
I set up the following event handler:
function storageEventHandler(e){
alert("key " + e.key);
alert("oldValue " + e.oldValue);
alert("newValue " + e.newValue);
alert("url " + e.url);
}
window.addEventListener('storage', storageEventHandler, false);
which should be triggered by this:
localStorage.setItem('foo', 'bar');
However, all the properties in the event (e.g. e.key and everything else) are all undefined. I am using Firefox 3.16. Why are the event properties undefined?
EDIT. Here is all the code I am using. The storage event fires in Firefox 3.16 but not in Firefox 4.0b8
Also, important, I am running it from XAMPP http://localhost/index.html Running it from file:// make it die localStorage Getting NULL?
<!DOCTYPE html5>
<html lang="en">
<head>
<script class="jsbin" src=".4.2/jquery.min.js"></script>
<script>
$(function() {
var edit = document.getElementById('edit');
$(edit).blur(function() {
localStorage.setItem('todoData', this.innerHTML);
});
// when the page loads
if (localStorage.getItem('todoData')) {
edit.innerHTML = localStorage.getItem('todoData');
}
window.addEventListener('storage', storageEventHandler, false);
function storageEventHandler(e){
alert('localStorage event fired')
}
});
</script>
</head>
<body>
<header>
<h1> My Simple To-Do List </h1>
</header>
<section>
<ul id="edit" contenteditable="true">
<li></li>
</ul>
</section>
<em>Add some items, and refresh the page. It'll remember what you typed.</em>
</body>
</html>
EDIT #2: Here's a simpler example that shows the problem between the browsers...
<html>
<head>
<script>
function storageEventHandler(e){
alert('localStorage event fired')
}
window.addEventListener('storage', storageEventHandler, false);
localStorage.setItem('foo', 'bar');
alert('ok')
</script>
</head>
<body>
Test
</body>
</html>
The event that should be fired when localStorage is changed seems to be lacking information in Firefox.
I set up the following event handler:
function storageEventHandler(e){
alert("key " + e.key);
alert("oldValue " + e.oldValue);
alert("newValue " + e.newValue);
alert("url " + e.url);
}
window.addEventListener('storage', storageEventHandler, false);
which should be triggered by this:
localStorage.setItem('foo', 'bar');
However, all the properties in the event (e.g. e.key and everything else) are all undefined. I am using Firefox 3.16. Why are the event properties undefined?
EDIT. Here is all the code I am using. The storage event fires in Firefox 3.16 but not in Firefox 4.0b8
Also, important, I am running it from XAMPP http://localhost/index.html Running it from file:// make it die localStorage Getting NULL?
<!DOCTYPE html5>
<html lang="en">
<head>
<script class="jsbin" src="http://ajax.googleapis./ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function() {
var edit = document.getElementById('edit');
$(edit).blur(function() {
localStorage.setItem('todoData', this.innerHTML);
});
// when the page loads
if (localStorage.getItem('todoData')) {
edit.innerHTML = localStorage.getItem('todoData');
}
window.addEventListener('storage', storageEventHandler, false);
function storageEventHandler(e){
alert('localStorage event fired')
}
});
</script>
</head>
<body>
<header>
<h1> My Simple To-Do List </h1>
</header>
<section>
<ul id="edit" contenteditable="true">
<li></li>
</ul>
</section>
<em>Add some items, and refresh the page. It'll remember what you typed.</em>
</body>
</html>
EDIT #2: Here's a simpler example that shows the problem between the browsers...
<html>
<head>
<script>
function storageEventHandler(e){
alert('localStorage event fired')
}
window.addEventListener('storage', storageEventHandler, false);
localStorage.setItem('foo', 'bar');
alert('ok')
</script>
</head>
<body>
Test
</body>
</html>
1 Answer
Reset to default 8Firefox 3.6 (Gecko 1.9.2) doesn't implement these properties (the specification was changing and most other browsers at the time didn't implement these properties either). This is fixed in Firefox 4 (Gecko 2). See https://bugzilla.mozilla/show_bug.cgi?id=501423
[edit] your testcase is a single-page. The spec says:
When the setItem(), removeItem(), and clear() methods are called on a Storage object x that is associated with a local storage area, if the methods did something, then in every HTMLDocument object whose Window object's localStorage attribute's Storage object is associated with the same storage area, other than x, a storage event must be fired, as described below.
So you need a separate page on the same domain to observe the event.