{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 疯言疯语 的问题《localStorage event listener does not fire in Chrom》','https://www.manongdao.com/q-1194572.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I 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. It also works on a live server, but not when I am testing using a local file (file:///).
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function() {
console.log('Clicked');
if($('#username').val() != "")
localStorage.setItem('someItem', 'someValue');
});
$(window).bind('storage', function(e) {
alert('change');
});
});
</script>
</head>
<body>
<input type="text" id="username" name="username" value="" />
<a href="#" id="submit">Click me</a>
<p id="result"></p>
</body>
</html>
What is the problem with this in Chrome? I'm opening two tabs as required.
It will only fire the event in the "other" tabs/windows but not in the one changing the data (this is a bit unclear in your question so please correct me if I misunderstood).
Source W3C
Update to complete the answer based on comments:
There will be restrictions in some browsers if the page is running from the file protocol (
file:///) due to security reasons.In Chrome you can override this by supplying the argument
--allow-file-access-from-files:I'm not sure if you can do something similar with other browsers. I would recommend testing with a local server (e.g. such as Mongoose) in order to not run into any surprises in a live scenario.