Trung Huynh Trung Huynh - 9 months ago 79
Javascript Question

localStorage event listener cannot fire in chrome

I'm doing something and need to be notified when localStorage is changed. This code works fine in Firefox 24, but doesn't work in Chrome 29 (or 30) or in IE 10.

Here is the code:

<!DOCTYPE html>
<script src=""></script>
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function() {
if($('#username').val() != "")
localStorage.setItem('someItem', 'someValue');
$(window).bind('storage', function(e) {

<input type="text" id="username" name="username" value="" />
<a href="#" id="submit">Click me</a>
<p id="result"></p>

Is it a Chrome bug or is Chrome not following LocalStorage specification? And sure, I opened two tabs, two windows, and tried many cases. Still not working in Chrome.


It will only fire the event in the "other" tabs/windows but the one changing the data (this is a bit unclear in your question so please correct me if I misunderstood).

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 Document 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.

Source W3C

Update to complete the answer based on comments:

There will be restrictions in most browsers if page runs from the file protocol (file:///) due to security reasons.

In Chrome you can override this by supplying the argument --allow-file-access:

chrome.exe --allow-file-access

I'm not sure if you can something similar as this with other browsers, however, I would recommend to test with a local server (e.g. such as Mongoose) in any case to not run into any surprises in a live scenario.