localStorage事件侦听器不会在本地文件的Chrome中触发 [英] localStorage event listener does not fire in Chrome for local file

查看:157
本文介绍了localStorage事件侦听器不会在本地文件的Chrome中触发的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

localStorage 发生变化时,我需要得到通知。此代码在Firefox 24中正常工作,但在Chrome 29(或30)或IE 10中不起作用。它也适用于实时服务器,但不是在使用本地文件( file:/// )。



以下是代码:

 <!DOCTYPE html> 
< html>
< head>
< title>索引< / 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 =textid =usernamename =usernamevalue =/>
< a href =#id =submit>点击我< / a>
< p id =result>< / p>
< / body>
< / html>

这在Chrome中有什么问题?我会根据需要打开两个标签。

解决方案

它只会触发其他标签/窗口中的事件,但不会在改变数据的时候(这在你的问题中有点不清楚,所以如果我误解了请纠正我)。


当setItem ),在
存储对象x上​​调用removeItem()和clear()方法,如果
方法执行了某些操作,那么在每个Document对象的Window
对象的localStorage属性的存储对象与
相关联,而存储区域是,而不是x ,所以必须触发一个存储事件
,如下所述。


来源W3C



更新根据评论完成答案:

s会有限制由于安全原因,如果页面正在从文件协议( file:/// )运行,则为浏览器。



在Chrome中,您可以通过提供参数 - 允许从文件访问文件来覆盖此内容:

  chrome.exe  - 允许文件从文件访问

我不确定你是否可以在其他浏览器上做类似的事情。我会推荐使用本地服务器进行测试(例如 Mongoose ),以便不运行进入现场场景中的任何惊喜。


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

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 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:

chrome.exe --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.

这篇关于localStorage事件侦听器不会在本地文件的Chrome中触发的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆