本地存储事件侦听器不会在 Chrome 中针对本地文件触发

localStorage event listener does not fire in Chrome for local file

本文关键字：文件 事件 存储 侦听器 Chrome      更新时间：2023-09-26
我需要

在更改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 中有什么问题？我根据需要打开两个选项卡。

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

当 setItem((、removeItem(( 和 clear(( 方法在 与本地存储区域关联的存储对象 x，如果 方法做了一些事情，然后在每个 Document 对象中 窗口 对象的 localStorage 属性的存储对象与 相同的存储区域，除了 x，必须触发存储事件， 如下所述。

来源 W3C

更新以根据注释完成答案：

由于安全原因，如果页面从文件协议(file:///(运行，则在某些浏览器中会有限制。

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

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

我不确定您是否可以使用其他浏览器执行类似操作。我建议使用本地服务器(例如猫鼬(进行测试，以免在实时场景中遇到任何意外。

相关文章：