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.com/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>
