10

更改时需要通知我localStorage。此代码在 Firefox 24 中运行良好，但在 Chrome 29（或 30）或 IE 10 中不起作用。它也适用于实时服务器，但在我使用本地文件（file:///）进行测试时不起作用。

这是代码：

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

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

4

1 回答 1

12

它只会在“其他”选项卡/窗口中触发事件，但不会在更改数据的那个中触发事件（这在您的问题中有点不清楚，所以如果我误解了，请纠正我）。

当 setItem()、removeItem() 和 clear() 方法在与本地存储区域关联的 Storage 对象 x 上调用时，如果这些方法执行了某些操作，则在每个 Document 对象中，其 Window 对象的 localStorage 属性的 Storage 对象为与除 x 以外的相同存储区域相关联，必须触发存储事件，如下所述。

来源 W3C

更新以根据评论完成答案：

file:///出于安全原因，如果页面从文件协议 ( ) 运行，某些浏览器会受到限制。

在 Chrome 中，您可以通过提供参数来覆盖它--allow-file-access-from-files：

chrome.exe --allow-file-access-from-files

我不确定你是否可以对其他浏览器做类似的事情。我建议使用本地服务器（例如Mongoose）进行测试，以免在实时场景中遇到任何意外。

于 2013-10-03T04:23:48.123 回答